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 229 posts 386 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 11280 posts 23678 karma points MVP 11x 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 229 posts 386 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 11280 posts 23678 karma points MVP 11x 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 229 posts 386 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.

Please Sign in or register to post replies

Write your reply to:

Draft