Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 1, 2014 at 2:30 pm #328100
    Gstar72

    Hi Guys,

    I have section with a background image. When you switch to mobile view you can’t read the text as it overlaps the image. I tried changing the image in Photoshop, and playing with colour overlays, but it doesn’t look as good as the original image. – see header image here: http://www.naturaloutlook.com

    If I use the slider options, with Caption Positioning and ‘Framed’ the text sets to default styling, which I don’t like.

    My question is, could I have the html to apply ‘framing behind text” and be able to select the colour and opacity of the framing colour block behind the text, if placed anywhere within the page?.

    This is the html I grabbed, from your theme demo, but with the text I want to use – however, I couldn’t get it to work:

    <div class=”avia-inner-caption”><h2 class=”avia-caption-title” itemprop=”name”>Gary Flooks – Digital Communications Manager,<br/>with 9 years international experience.</h2><div class=”avia-caption-content ” itemprop=”description”><p>I lead, manage and deliver on helping to elevate brand presence through:
    creative best practice; interface-design; branding; business development;
    marketing and communications strategies, working with digital agencies,
    global brands, start-ups, NPO’s, and private business.</p>
    </div></div>

    Thank you

    Gary

    October 1, 2014 at 3:01 pm #328144
    avraamd

    i am currently looking for a similar or say exact solution see this http://www.greekeggs.gr/%CF%80%CF%81%CE%BF%CF%8A%CF%8C%CE%BD%CF%84%CE%B1/baby-plus/

    i want to have a semitransparent colour behind the text so it is not hard to read, both on PC or mobile.
    lets see what the experts would say.

    Thanks

    Avraam

    October 1, 2014 at 4:20 pm #328233
    Gstar72

    Nice work Avraam.

    Perhaps the next site update may help with overall site flexibility?.

    October 2, 2014 at 8:56 pm #329237
    Andy

    Hey!

    Try to use this in the Quick CSS:

    .avia_textblock
{
background-color: rgba(255,255,255,0.9);
}

.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2
{
background-color: rgba(255,255,255,0.9);
}

    “255,255,255” is the RGB Code, which you can modify to any color you want. “0.9” is the opacity of this color. Have fun playing around with that.

    Cheers,
    Andy

    • This reply was modified 10 years, 2 months ago by Andy.
    October 2, 2014 at 9:35 pm #329270
    Gstar72

    Thanks Andy,

    I understand that I add this code to custom CSS, my issue is that I wanted to use the text block in a normal text field, rather than selecting a slider with text block functions. Is this possible, or am I missing the point of the Quick CSS?.

    Is there html code that I can add to a text section for the text block – sorry Andy.

    October 2, 2014 at 10:47 pm #329311
    Andy

    Hey!

    The Quick CSS (which you will find in your WordPress backend->Enfold->General Styling) will style the text block you asked for. I think it is exactly what you need. Did you try it?

    Regards,
    Andy

    October 3, 2014 at 11:00 am #329594
    Gstar72

    It worked a treat – how did you do that Andy – genius!….sending you a virtual beer.

    Many thanks,

    Gary

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Text Framed Option’ is closed to new replies.