Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 4, 2015 at 12:47 am #529686
    SynergyLanguageServices

    Hi Guys,

    I am working on a text block customization on my website’s homepage:

    allotropydigital.com

    I would like to customise the text block that says “Enhance your global reach” with the globe background.

    Here is the CSS code that I currently use – I have named the custom css field as “enhanceyourglobalreach”

    #top .enhanceyourglobalreach {
    background-color: #657787;
    box-shadow: 10px 10px 10px #888888;
    min-height: 100px;
    max-width: 1000px;
    opacity: 0.5;
    }

    I would like the text to be non-transparent but at the same time I want to keep the background transparent at 0.5. Additionally I would also like for the grey background field to be exactly in the middle (which obviously isn’t at the moment). I want to achieve exactly the same effect that you can see on the main slider on the top of the home page.

    Could you please help me with this one?

    Many thanks in advance.

    Kind regards,

    Ben

    November 4, 2015 at 4:03 pm #530127
    Elliott

    Hi SynergyLanguageServices!

    You have an extra empty H1 in there. Remove that first and then use this CSS.

    .enhanceyourglobalreach h1 {
    background: rgba(0,0,0,0.3) !important;
    width: auto !important;
    margin: 0px auto !important;
    display: inline-block !important;
    padding: 20px !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

    Best regards,
    Elliott

    November 4, 2015 at 4:58 pm #530226
    SynergyLanguageServices

    Hi Elliott,

    Thanks a lot, this worked well, amazing styling!

    I have one more question though, how do I change the opacity of the background color only, because this one below changes the opacity of both the background and the text?

    opacity: 0.5;

    Many thanks in advance.

    Best wishes,
    Ben

    November 4, 2015 at 5:00 pm #530230
    Yigit

    Hey!

    Please find 

    background: rgba(0,0,0,0.3) !important;

    in Elliott’s code and change 0.3 as needed. 0.3 is opacity level and 0,0,0 is RGB value of the color

    Cheers!
    Yigit

    November 4, 2015 at 5:29 pm #530265
    SynergyLanguageServices

    Hi Yigit,

    Thank you for your reply – that’s awesome, works fine, thank you.

    The only thing is that now the main caption is messed up in my slider on the top of the homepage, it is supposed to stay in the middle as the rest of the captions. The main caption slid away to the right hand side of the screen.

    I currently use these CSS codes for class names I use on the homepage:

    #top .enhanceyourglobalreach h1,h2,h3 {
    background: rgba(0,0,0,0.3) !important;
    width: auto !important;
    margin: 0px auto !important;
    display: inline-block !important;
    padding: 20px !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    }

    #top .wholeworld h1,h3 {
    background: rgba(0,0,0,0.7) !important;
    width: auto !important;
    margin: 0px auto !important;
    display: inline-block !important;
    padding: 20px !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    }

    Is there something this could have messed up in the main slider?

    Many thanks,
    Ben

    November 4, 2015 at 5:47 pm #530288
    Elliott

    Hey!

    Yes, when you use commas in your code like so.

    #top .enhanceyourglobalreach h1,h2,h3 {

    Do it like this.

    #top .enhanceyourglobalreach h1, #top .enhanceyourglobalreach h2, #top .enhanceyourglobalreach h3 {

    Otherwise it will target every H2 and H3 element on the page.

    Best regards,
    Elliott

    November 4, 2015 at 5:53 pm #530295
    SynergyLanguageServices

    Hi Elliott,

    Many thanks, I appreciate your help – this worked well.

    I am just learning, so sorry about the silly questions.

    Great work guys, great support!

    Thanks again.

    Ben

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Custom CSS for Avia's Text Block’ is closed to new replies.