Qua theme CSS – banner at top, captions to rollover text

  • Unknown's avatar
    helenhemingway · Member ·

    Hello there

    I’ve nearly finished this website but have a couple of things I’d like to add and want to see if its possible using CSS:

    Firstly I want to include the contact number and email at top right of every page – initially I had them as a footer but the request is to get it up top. I tried to add them manually, as a ‘logo’, but it obscured the site title… How do I go about having this information top right, appearing on each and every page.

    Also, on our Homepage, I want to add captions ‘Film’ ‘Theatre’ ‘Commercial’ ‘Promo’ as rollover text like they appear in the galleries, rather than at bottom of each image as it doesn’t look very clean. Any ideas?

    All help appreciated.

    Shanthi

    The blog I need help with is: (visible only to logged in users)

  • ehtis · Staff ·

    Hey Shanthi,

    Can you upload that ‘logo’ to your media library and post its direct link? We might be able to place it at the top-right corner via CSS. Shouldn’t be too wide.

    As for rollover captions, here’s the code. Not perfect, but does the job!

    .home figure {
    position: relative;
}
.home figure:hover .wp-caption-text {
  opacity: 1;
  padding: 20px;
}

.home .wp-caption-text  {
    background: rgba( 255,255,255,0.8 );
    bottom: -25px;
    color: #333;
    opacity: 0;
    position: absolute;
    width: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition:    all 0.2s ease-in-out;
    -o-transition:      all 0.2s ease-in-out;
}
  • Unknown's avatar
    helenhemingway · Member ·

    Hey Ehtis,

    Thanks for your help with rollover text. Would there be any CSS to change the font so it isn’t italic and 4pts bigger? Please.

    As for the logo, would be great if it said:

    Agency contact: (email visible only to moderators and staff) Tel: +44 207 437 2055

    Be great if there was HTML so people could click on both, to launch the UK email and telephone network servers and dial through, directly. I left an example in Media Library but it needs to say the above, in Paragraph font but in bold. Is that OK. Thanks so much in advance!

  • Unknown's avatar
    helenhemingway · Member ·

    Actually – as you’re so knowledgable – I wondered if you could answer something else for me. My Footer includes personal contact email / tel

    (email visible only to moderators and staff)
    +44-7939-061-575

    And an Instagram link
    Firstly there are two lines, broken – be great to have it as one long line… or none at all. And could Contact Info and Social Media Icons appear on bottom left… using CSS? Please let me know – I need to learn a lot of CSS I think :)

  • ehtis · Staff ·

    Would there be any CSS to change the font so it isn’t italic and 4pts bigger?

    There sure is!

    .home .wp-caption-text {
    font-size: 16px;
    font-style: normal;
}

    Be great if there was HTML so people could click on both, to launch the UK email and telephone

    Strictly talking about CSS, it’s not meant to add HTML/content, rather only style stuff.

    However, we can use pseudo-elements in some cases to add text, especially where our hands are tied and I’m going to do the same. Pseudo-elements are not clickable/selectable though, but will do the job of displaying that information. Here it is:

    .wf-active h2.site-description::after {
    content: "Contact: (email visible only to moderators and staff) Tel: +44 207 437 2055";
    font-family: "museo-sans-1","museo-sans-2",sans-serif;
    font-size: 11px;
    display: block;
    font-weight: bold;
    margin-left: 220px;
    color: #666;
}

@media screen and (max-width: 1024px) {
.wf-active h2.site-description::after {
    margin-left: 0px;
    }
}

@media screen and (min-width: 768px) {
h2.site-description {
    margin-top: -2px;
    }
}

    Firstly there are two lines, broken – be great to have it as one long line… or none at all. And could Contact Info and Social Media Icons appear on bottom left.

    Alright, both done! :) But please do note that if you add more widgets in this area, it could get a bit messy. Also, I’m restricting it to desktop-size only to keep the design intact on mobiles/tablets.

    Code:

    @media screen and (min-width: 960px) {
.confit-hours {
    margin-top: -28px;
    margin-left: 136px;
    }
#widget_contact_info-6 {
    border: none;
    margin-top: 20px;
    margin-left: -590px;
    }
}

    I need to learn a lot of CSS I think :)

    Thanks for the good words and learning is a constant process, we all are doing it! :) For a basic tutorial check out this link.

    Good luck!

  • Unknown's avatar
    helenhemingway · Member ·

    Hi Ehtis
    Thanks so much for your time spent finding CSS codes I need.

    I added the CSS for the contact / tel but its now taking up space / created too much white space under Site Title etc – and pushed down the 4 homepage images.

    I wondered if I could have contact details just like this website: http://alexandraday.co.uk/

    A thin grey (not black) banner with the contact / tel sitting in white on the grey banner strip?

    Then the Site Title and Menu Navigation would be more noticeable and the 4 images will sit higher / look stronger.

    Also, thanks very much for the other two sets of code – rollover captions look great, and the widget footer looks good though the thin grey line is still too short. Also could the social media: instagram logo go under the (email visible only to moderators and staff) address.

    Sorry this is taking longer than expected.

  • ehtis · Staff ·

    OK, first I’d like you to change a few things.

    I just noticed, you’ve put the code block that has your contact info inside this @media query:
    @media screen and (min-width: 960px)

    Which is causing the contact info strip to disappear on mobile screens. In my previous post, the first code block with ::after shouldn’t be enclosed inside any media query.

    That block should be like the following, add it after removing the entire previous block where I gave the contact info strip code:

    /* Add all the following 3 blocks, remove previous 3 similar blocks */

.wf-active h2.site-description::after {
    background-color: grey;
    color: #fff;
    content: "(email visible only to moderators and staff) / +44 207 437 2055";
    display: block;
    font-family: "museo-sans-1", "museo-sans-2", sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-left: 330px;
    padding: 1px 5px 1px 5px;
}

@media screen and (max-width: 1024px) {
.wf-active h2.site-description::after {
    margin-left: 0;
    }
}

@media screen and (min-width: 768px) {
h2.site-description {
    margin-top: -4px;
    }
}

    The above will also format the strip with a grey background and white text like you asked. Can’t move it to the top though, it breaks the design on tablets.

    its now taking up space / created too much white space under Site Title etc

    This can be fixed. The following will reduce the blank space that is below the contact info strip:

    .wf-active h2.site-description {
    margin-bottom: -12px;
}

    Adjust the spacing as desired.

    could the social media: instagram logo go under

    Yep, this will make the logo go under:

    #widget_contact_info-6 {
    margin-top: -25px;
}
  • Unknown's avatar
    helenhemingway · Member ·

    Hey Ehtis

    I’ve added the changes you suggested, though not the grey strip CSS – as I mainly wanted it at the top of the page, across the entire width – but you say this won’t appear on iPads right?
    Also, with regards to the contact info – not sure which ‘media query’ to delete, and notice they still won’t appear on mobile phones. Could you clean the CSS up for me, am worried I will delete the wrong thing.
    I’ve decided that – if Site Title / Tagline / Logo has to all be black text on white at the top then I would like them all lined up on line. Then have the menu navigation beneath that.
    The final thing is the line by the widget, it actually looks odd as its the only line – can we delete it?

    Many thanks, as always
    Shanthi

  • ehtis · Staff ·

    Yep, bringing everything on one line, including the pseudo-element with contact info will cause complications on mobile layout. I’ll suggest not going that route.

    You’ve added some of the code at wrong places, which is causing the contact info to not show on mobile screens. This should fix everything, including that line by the widget (border above footer widget).

    Add this code at the end:

    .wf-active h2.site-description::after {
    content: "(email visible only to moderators and staff) / +44 207 437 2055";
    display: block;
    font-family: "museo-sans-1", "museo-sans-2", sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin-left: 330px;
}

@media screen and (max-width: 1024px) {
.wf-active h2.site-description::after {
    margin-left: 0;
    }
}

@media screen and (min-width: 768px) {
h2.site-description {
    margin-top: -15px;
    }
}

.wf-active h2.site-description {
    margin-bottom: -18px;
}

.footer-widgets .widget {
    border: none;
}

    Please also go through this basic CSS guide, and this one on on finding your theme’s code. It can help you get the idea of the selectors your theme uses and how to quickly change them.

  • Unknown's avatar
    helenhemingway · Member ·

    Thanks Ehtis for that code.

    I think it looks OK how it is, now. Will try and play around with the contact details so it looks good from a design perspective.

    But many thanks for your help! Shanthi

  • The topic ‘Qua theme CSS – banner at top, captions to rollover text’ is closed to new replies.