• Resolved S R

    (@the-goshorn-9)


    Hi, I’m using Thesis Classic Responsive theme on this site: http://howehealth.com/dev1/index.php/new-home-page/

    I need to move the tagline in header so it looks like this:
    http://prntscr.com/9ndl2c

    When I try adding padding to the top or bottom, it expands the header height and moved the actual header down.
    However, I was able to align the text to the right as I wanted it by adding padding-left: 245px;
    This is what I have so far:

    #tagline_new {
    	color: white;
    	line-height: 1em;
    	font-style: italic;
    	font-family: Times New Roman,serif;
    	font-size: 17px;
        padding-left: 245px;
    	padding-top: 0px;
    	padding-bottom: 0px;
Viewing 8 replies - 1 through 8 (of 8 total)
  • Hey there S R,

    How are you doing today?

    I’ve tried checking your site but there is an authentication required so I can’t really see what you’re having right now, can you please disable that and I’ll be happy to try to help πŸ™‚

    Cheers,
    Bojan

    Thread Starter S R

    (@the-goshorn-9)

    Hi there,

    I can’t disable the privacy thing right now but here are some screenshots:

    This is what it looks like now:
    http://prntscr.com/9njtpb

    This is what I need it to look like:
    http://prntscr.com/9ndl2c

    Do you have experience moving taglines?
    When I add my custom text to the Tagline in Header box, it pushes the header down below the nav menu:
    http://prntscr.com/9njwbr

    Thread Starter S R

    (@the-goshorn-9)

    Hey, I solved my own issue with this bit of code:

    #tagline_new {
    color: white;
    line-height: 1em;
    font-style: italic;
    font-family: Times New Roman,serif;
    font-size: 17px;
    padding-left: 239px;
    text-align: left;
    position: absolute;
    top: 6.8em;

    However, I still do need a bit of help with a related but different issue. And maybe you have some pointers on this?
    How do add another picture element to a header so that is shows up on all the pages except the home page?

    This is the home page header:
    http://prntscr.com/9nkkwa

    This is the other pages header:
    http://prntscr.com/9nkkoa

    Should I used a Custom feature box or ? I’m a little stumped on this. I can’t just have two different headers because the look needs to change on mobile view (i.e. the circular logo wont’ show at all on the pages in mobile view)
    Example for the mobile/small window view:
    http://prntscr.com/9nklh0

    Thanks!

    Hey again S R,

    Glad you managed to figure that out, seeing screenshots wouldn’t really help as I’d need to check your site in order to help you with that.

    As for your other issue both of your issues could be easily done with CSS after you add that image into your header.

    To have it on home page you can use something like this:

    .imageclass {
    display: block;
    }
    
    .home .imageclass {
    display: none;
    }

    This would display that same image across your site in the header and the second part would override that and remove it only from your home page.

    For mobile resolutions you can simply use media queries and remove it from smaller screens on your site. You can find more info about the use of media queries here.

    So for example adding something like this:

    @media (max-width: 600px) {
      .imageclass {
        display: none;
      }
    }

    would hide the same element on resolutions below 600px in width.

    Hope this helps πŸ™‚

    Cheers,
    Bojan

    Thread Starter S R

    (@the-goshorn-9)

    Thanks, Bojan!
    I’m going to play around with it. I am using custom templates on the Thesis site so I will have a special template for the Home page only and that way I don’t need to worry about hiding the circular head shot on the home page. However, I still do have an issue with the tagline. I want the tagline to stay on mobile view.
    This is full view:
    http://prntscr.com/9oyzpe
    This is a mobile view:
    http://prntscr.com/9oyzub
    I guess I basically need to make sure the text shrinks from 17 to 15px and then have it move over accordingly. Right now, I have my tagline positioned with this bit of code:

    text-align: left;
    	position: absolute;
    	margin-top: 88px;
        margin-bottom: 100px;
        margin-right: 150px;
        margin-left: 235px;
    	width: 500px;
        height: 150px;

    Obviously this code wont’ work for mobile so I am going to try and go in and add the media query tags, I guess and see if that does the trick.

    Any suggestions or plugins that will make this job easier?

    THank you again

    Hey again S R,

    This needs to be handled with CSS so I don’t really know if there are plugins that could help with this.

    Again screenshots don’t really help, I’d have to see this on your site.

    Best regards,
    Bojan

    Thread Starter S R

    (@the-goshorn-9)

    Okay, is there anyway that i can send you a private message? If so, I’d like to do that and explain things further and give you access.
    Thanks!

    Hey again S R,

    There is no way to send a private message on this forum neither are you should offer access to your admin to anyone here. Please check the following link to see more about forum guidelines https://codex.wordpress.org/Forum_Welcome.

    Best regards,
    Bojan

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Thesis Tagline in Header issues’ is closed to new replies.