Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Marcus Maunula 218 posts 364 karma points
    Mar 17, 2015 @ 18:45
    Marcus Maunula
    0

    Grid Layout - How to set class on H1 (header)

    Trying to figure out the settings for this.

    I have this but how do you set the class dynamically for the h1? I have several types.

    {
       
    "name": "Headline",
       
    "alias": "headline",
       
    "view": "textstring",
       
    "icon": "icon-coin",
       
    "config": {
           
    "style": "font-size: 36px; line-height: 45px; font-weight: bold",
           
    "markup": "<h1>#value#</h1>"
       
    }
    }
  • Jan Skovgaard 11258 posts 23500 karma points MVP 7x admin c-trib
    Mar 17, 2015 @ 21:04
    Jan Skovgaard
    1

    Hi Marcus

    How many different h1 classes are you going to need?

    I'm thinking if you could perhaps make use of quantity queries instead? A bit like Heydon is writing about in this article http://alistapart.com/article/quantity-queries-for-css - Just targeting h1's. I know that this can be hard but if you know that the first h1 always needs to be a certain style and all the others need to be another style it may be an option - depending on the level of browsers you need to support as well of course.

    Or if the H1 styling should differ for certain page types then you could perhaps set a class on the element with the name of the document type and then use this class to target the h1's on the page.

    Otherwise I think you'll need to create multiple types of headlines in the config where you can add unique classes...which is not that dynamic I guess.

    Looking forward to hearing from you.

    /Jan

  • Marcus Maunula 218 posts 364 karma points
    Mar 17, 2015 @ 23:40
    Marcus Maunula
    0

    Thank you Jan.

    I studied the Fanoe Theme more now and I think I found a couple of paths.

    My first option was to hardcode various classes into markup and simply make a list of header types to choose from (both h1 and h2x).I am still total noob when it comes to Grid, first chance to do something concrete now. 

    Another silly q is this. If I want a div with background image where I want a media uploader but display as div rather than img. Do  I need to make a custom editor for that or is there a quicker way?

  • Jan Skovgaard 11258 posts 23500 karma points MVP 7x admin c-trib
    Mar 18, 2015 @ 05:12
    Jan Skovgaard
    100

    Hi Marcus

    I think you would need to make a custom editor where you define it like the H1 above and then set the value in the div like....<div style="background:url(#value#)">....I have not tried though but I can imagine it would be something like that.

    /Jan

  • Marcus Maunula 218 posts 364 karma points
    Mar 18, 2015 @ 08:58
    Marcus Maunula
    0

    I am beginning to come come around with this now. Thanks for the pointers Jan.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies