Branding Logo + Text

[[Deleted User] 0]

I am trying to figure out how to use hooks to modify branding ??“ I have already added some text to branding but it is displayed either on top or bottom of the logo. Please help me out, how to display it inline? (my site is not live yet, sorry can't provide a link)

[catrina 103]

Which hook are you using to modify the branding? The easiest way is using CSS. You'll need to make sure the text is inside a DIV that can be repositioned using CSS.

[[Deleted User] 0]

Hey catrina, thanks for looking into it! I am trying to use hooks listed in the Template Setup section: currently the pagelines_inside_bottom_branding which makes my text display at the bottom of logo. What CSS code would you recommend to use and with which hook?

[catrina 103]

Put the text you have inside the hook within a DIV like this: [code]

TEXT HERE

[/code] Add this CSS to Custom Code > Custom CSS: [code]div.logotext {margin-top: -15px; margin-left: 40px;}[/code] You'll need to adjust the margin values (-15px and 40px) to get the alignment right. For more on margins, please see here: http://www.w3schools.com/css/css_margin.asp

[[Deleted User] 0]

hmm, now it looks more or less shaped up with the margins, Thanks!! I have two lines of text after the logo: site name and description. Description is ok with the regular text, But I need to use h1 for my site name, not the regular div text (the h1 doesn't work with this type of styling, does it?) ....

[catrina 103]

h1 does work. You can add an h1 and DIV inside the hook so it looks like this: [code]

YOUR SITE NAME

DESCRIPTION

[/code] The CSS would look like this: [code]h1.sitename {margin-left: #px; margin-top: #px;} div.logotext {margin-top: #px; margin-left: #px;}[/code] Replace # with the values until the alignment is just right.

[[Deleted User] 0]

Thanks, catrina! I think I got it styled. But two things changed now, the link from h1 is gone (I have it in the hook and has worked before styling) and also the social icons on the right side (original layout) moved down a few pixels.. Can you please advise how to fix it? (I am sure this is caused by this branding modification because I didn't touch any other code)

[catrina 103]

The link within h1 needs to be added like this: [code]

SITE NAME

[/code] To move the social icons up please add this to CSS: [code]div#branding div.icons {margin-top: -5px;}[/code] Adjust the pixel number until it's just right.

[[Deleted User] 0]

I use this code for the title: [code]

[/code] the link still won't work.. and the icons don't move up neither. Maybe, it's the language switcher which I got in the header getting in the way? I have inserted it by using a hook [code]add_action('pagelines_before_branding_icons', 'add_language_selector'); function add_language_selector(){ do_action('icl_language_selector'); }[/code] and the CSS [code]#lang_sel { position: absolute; top: 20px; right: 200px; }[/code] Appreciate your assistance!!....

[catrina 103]

You can add the site link (http://domain.com) inside the tag. It might be the language switcher CSS that is interfering since it is using a hook for the branding icons. It would help to see a live page. If you can post a link whenever the site is ready, the page can be looked at and the CSS can be figured out more accurately.

[[Deleted User] 0]

I think the site link would not work for me because when in different language, I need it to link to the main page in that language. Ok, the site is live now ??“ http://wordofmouthlabs.com/

[catrina 103]

Try using instead. Here is code for adjusting the icons: [code]div#branding div.branding_wrap div.icons {margin-bottom: 30px;}[/code]

[[Deleted User] 0]

No, the get_home_url(); won't work for the link either.. but the icons are now in place, thx! Can you suggest something else I could do to get the header link working?..