Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 23, 2016 at 7:28 am #690534
    bakbek

    Hi, how can I highlight the title text with a color background so it will look like it does here – http://screencast.com/t/nhuBCwjiVUbQ?

    What HTML should I use in the title of the element to achieve the same result?

    Thanks!

    September 23, 2016 at 8:34 am #690554
    Guenni007

    it will be much easier to help if there was an example page – if you don’t like to post the live site link on public than only mods could help you. Or is there a Site on Enfold Demo Pages where the analogon is placed?
    f.e. http://kriesi.at/themes/enfold-wedding/ the heading there

    first of all the source code has to be in this way that you can make a selection between first line and after break the second line.
    Because html works in headings of enfold you can do the following to obtain a two line heading:

    first line<br/>second line but to make it easier to differ this might be a good source for that:

    first line <br/><span>second line</span> this will be enough but to shorten sometimes the code in your quick css it might be good to have here
    for the whole heading a custom class f.e. headline-background

    • This reply was modified 8 years, 1 month ago by Guenni007.
    September 23, 2016 at 9:07 am #690560
    Guenni007

    Results: http://webers-testseite.de/ikom/columns/
    The alb element headline has got his own custom class (here: headline-background )

    .headline-background * {
    letter-spacing: 2px !important;
    line-height: 60px;
}

.headline-background span {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 2px 2px 3px #333;
    border-radius: 15px;
    padding: 5px;
}

    the first rule: everything following that custom class gets the attributes ( so h2 in this case and the span)
    the second rule : only the span content

    PS : i styled it a bit more that you can see how it works – if you only want to have black background with white font-color – you know what to do.

    • This reply was modified 8 years, 1 month ago by Guenni007.
    September 23, 2016 at 2:27 pm #690744
    bakbek

    Hi, must admit you confused me a bit ;)

    I tried your code but it doesn’t look like it made any difference.

    September 23, 2016 at 2:55 pm #690779
    Guenni007

    you see my example page above that it works !

    but without a link to your site this is only “divination” – from a screenshot it is nearly impossibel to say what code might help you

    My guess was – that on your screenshot there is a color-section with heading in it!
    There was a second line which should get a different background-color than the first line.

    So to make a selection possible these two lines must have a different source. To get one i inserted a span tag to the second line of the heading.

    • This reply was modified 8 years, 1 month ago by Guenni007.
    September 23, 2016 at 4:50 pm #690904
    bakbek

    I understand and I appreciate your help :) Here is how I want it to look – http://screencast.com/t/HHhxR4TRT – and here is the link to the test site –

    • This reply was modified 8 years, 1 month ago by bakbek.
    September 23, 2016 at 7:39 pm #690983
    Guenni007
    .home #av_section_1 .av-special-heading-tag span {
    background: #000 !important;
    color: #fff !important;
    padding: 0 15px;
}

    the padding is not necessary but i think it looks better.

    September 23, 2016 at 7:45 pm #690985
    Guenni007

    and by the way if this is the site with background image to go away i would like to get rid of that before 480px

    @media only screen and (max-width: 768px) {
#service {
    background-image: none !important;
}
}
    September 24, 2016 at 3:50 pm #691169
    bakbek

    Thanks a lot! Can you take a look at this thread – https://kriesi.at/support/topic/how-do-i-control-the-description-of-the-menu-links-on-the-creative-studio-demo/ – and see if you can help me out with that?

    September 24, 2016 at 4:02 pm #691177
    Guenni007

    done !

    September 24, 2016 at 9:37 pm #691266
    bakbek

    Awesome! one last thing, how can add more space between the first line and the second line background – http://screencast.com/t/HHhxR4TRT – it seems that the background above the second line is slightly higher than below the second line.

    September 27, 2016 at 12:27 pm #692165
    Andy

    Hi,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Andy

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.