How to add logo to left of site title and tagline in header

[stlane]

Can someone please help me add a logo to the left of site title and tagline in the header at https://www.yanawanaherbolarios.org/ to be somewhat similar to how the logo appears here:  http://www.sustainablesanantonio.com/

I’ve somehow added the logo twice to the header and only meant to do it once, it’s also obviously too big and I’m not certain if I even did this correctly to begin with. Or, can somehow use a short code.

Also, I’d like to have the slider to appear only on the homepage below the logo, title and tagline and don’t know if this should/can be done in the header or perhaps as a header widget.

Don’t know if it matters but I’ve found the below Div code on the “Options: Header Area” (https://guide.weavertheme.com/options-header-area/) but am not certain if this even pertains to what I’m trying to accomplish.

ERROR with [show_slider name=”header-images”]: You must specify a valid slider name.

Hope I’m posting this to the correct forum. Any help would be much appreciated as you can see I don’t know what the heck I’m doing. ;o) Thanks much in advance for your help!

[scrambler]

For the logo, try to select a Site logo in Customize > Site Identity > Select Logo

and then we can check if we can use CSS to get the positioning the way you want it

Did you add the slider using the header HTML replacement box?

If so, If you have the “plus” plugin, you can use that option in the Page editing page > Xtreme Options for this page > Xtreme Plus > Header HTML replacement.

If you do not have Plus, you can place the SLider shortcode inside a show_if shortcode with the post id of the page. Check the syntax in the Add-ons page with the help buble on the show_if line

the show slider shortcode you mention has invalid syntx, there should be no quote around the name, and of course the name should be a valid slider name you created.

[stlane]

Thanks much for your help! Yes, I’m using Plus and recommended plugins except for Gutenburg. I was able to add the logo, however, I don’t know where to go to get the positioning to move the title and tagline left and closer to the logo. Can you please advise? https://www.yanawanaherbolarios.org/

For the slider I used the Weaver Slider Posts plugin using the short code. The slider name/Shortcode is: [show_slider name=yanawana].

I would like to extend the slider to the left and right edges, add text to the images and have them link to different sections of the website like it is here:  https://yanawanaherbolarios.com/

My apologies, what I wrote about the “show slider name” I don’t believe applies to what we’re trying to do. And, I don’t know what you mean in regard to the “invalid syntx”, so it may be irrelevant?

Again, thanks much for your help and please let me know if you need additional info.

 

 

 

 

[scrambler]

To move the title and tagline left add the rule below in the Theme Global Custom CSS Rule box with the value you like

.custom-logo-link {margin-right:1em;}

To extend the slider in the header image are, go to Main Options > Header > Header Image > Align Header image and select Align Full

WordPress does not have any way to associate a custom link to images, so if you want a slider with such images, you need to create it with post and place the image with the custom link as content of the post. Below is a post where I gave the detail procedure for that.

https://forum.weavertheme.com/forums/search/slider+with+image+links/

[stlane]

Thanks, can you please advise?

1. Where is the “Theme Global Custom CSS Rule box” located for input of .custom-logo-link {margin-right:1em;}? I’m sorry but I can’t seem to find it.
2. My CSS skills aren’t much up to speed these days and since I’ll need to modify the provided rule you provided, can give an example of what is you’re educated guess of what you think it should be so I can play with it to be the value Iike and/or refer me to a good resource to learn?
3. Also, in the Customizer I found settings in Spacing, Widths, Alignment > Header Area > Site Title and Tagline, and played with them but while it changed Title and Tagline spacing to what I wanted in the preview, the spacing never changed on the website after publishing. Is this not yet a true feature/functionality for Title/Tagline spacing and/or a feature related to Gutenberg? Or, something else?
4. I also found similar Title/Tagline settings under Main Options > Header > <u>Site Title/Tagline,</u> are these the same settings? And if so, does one overrule the other, or are the synchronized and the last saved is what will be applied?

[scrambler]

1)

Customizer:
Custom CSS > Global Custom CSS

Legacy Admin:
Main Options > Fonts & Custom > Custom CSS Rule box

2) I don’t understand what you are saying. I gave you the Rule to use to set the space between the logo and the title / tagline (which is a right margin). Just put the rule in, then adjust the margin value to get more or  less space.

3)- 4) irrelevant as you have a logo in place, the space is managed by the rule I gave you

[stlane]

Thanks for your help. I added the rule (copied, pasted, published) and it appears. And I’m able to adjust the Title and Tagline (as before) shifting them to the left to where I want them, clicked publish and are still the same as how I want them. However, when I view the page directly in my browser the title and tagline are not positioned as they are in the Customizer view. Am I missing something? Please reference the below screenshot of how the title and tagline appears versus on the frontend:  https://www.yanawanaherbolarios.org/

[scrambler]

I cant speak for a difference between the customizer and the live site, but the rule is working, so you may want to be more specific about what you want.

If you want the title tagline closer, set the margin to zero.

But if what you want is for the title to move left more as to actually overlap the image rectangular are, then we need to do something different.

The rule to move the title left over the image would be

#site-title a  {margin-left:-20px;}

 

[stlane]

Yes, I want the title and tagline to move left over the transparent logo image.

Does the #site-title a  {margin-left:-20px;} go in the Theme Global Custom CSS Rule box below where we earlier pasted this code?  .custom-logo-link {margin-right:1em;} Customizer>Custom CSS>Global Custom CSS?

And do I need to do anything to separate these two scripts (or are they called shortcodes?) other than being on a line below the other provided previously? Thanks!

[scrambler]

All custom CSS rules go in the same place.

The rules can be placed in there, one after the other (separate line)

[stlane]

Thank you for all the help you’ve been providing. I’m still having difficulties with the slider. Can you please help me modify the slider to do the following? https://www.yanawanaherbolarios.org/

1. Have the text and link to be over the images rather than below the images?
2. Have the images link(s) go to different page(s) of the website that I designate?
3. Adjust the font type and color of the text that goes over the image(s)?

[scrambler]

How are you creating the slider?

Did you follow the tutorial I pointed you to?

If you did, to get the content of each slide to be an image linking to a page, and a text over it, he HTML would look something like below

<div style="position:relative;">
<a href="URL the image points to">
<img …….html of the image you want/>
</a>
</div>


<div style="position:absolute;width:100%;text-align:center;">Text and content to overlay on the image</div>

[stlane]

I did follow the tutorial you provided, although I’m not entirely certain I did everything correctly and may start from scratch.

In the meantime, can you tell me where this code you provided goes?

Text and content to overlay on the image

To confirm, regarding to your tutorial, are you providing two different ways of doing the same thing of Creating a slider of images that have links to pages other than the image file or attachment page (i.e. <u>A) Basic outline principle using regular posts</u> or <u>B) More detailed step by step using Slider Posts</u>)? Or is A) the first step before doing B)?

Again my apologies for dumb questions, it’s been a while since developing from scratch in WordPress, I’ve never done a slider and am slow getting up to speed. Thanks in advance for your help and patience.

[scrambler]

Slider post links

Either method will work.

The basic principle is that you need to use posts for the content of each slide.

You can use regular posts using a specific category, but then you need to make sure you exclude that category in your posts pages (if you have any).

Or you can use slider posts, which has the merit to be posts that wont show up in your post pages.

Then each post will have as its content, the proper HTML to include a linked image and a text overlay. This is the HTML I gave your the principle for in my last post.

[stlane]

I’m starting the slider from scratch, I want to exclude the category in my posts pages so they won’t show up in my post pages and I want four images in the slider.

So in referencing the tutorial:  https://forum.weavertheme.com/forums/topic/slider-post-links/#post-56096

Under <u>B) More detailed step by step using Slider Posts</u> I plan to first create a new Slider group (yhlinks-group). Then, in each new posts created do the following:

• Click Add media to add your image, select full size, center, custom URL, give the link (I presume to the page I want it to link to?)
• Select the slider group created above for that post.
• Publish

To confirm, do I first create a yhlinks-group post (location: Weaver Slider Post>New Weaver Slider Post – https://www.yanawanaherbolarios.org/wp-admin/post-new.php?post_type=atw_slider_post) and then add each image separately as a new post with a different name to be a “subpost” under the yhlinks-group post or will I add all four images within the one yhlinks-group post?

Hope I properly explained/asked that? Thanks again for your help.

[scrambler]

You will need to create one post for each slide yes.

Each post will belong to the yhlinks-group you create

Now once you have added the image with its custom URL in the post content, you will need to switch the content editor to text, check the post Misc option “allow Raw HTML and script”

Then edit the HTML to add the wrapping div around the image tag and link, and add a second div with your text that should be over the image following what I gave yiu before.

The HTML after you added the image should look something like

<a ….> <img ..…/>\</a>

You edit it to make it look like

<div style="position:relative;"> 
<a ….> <img ..…/>\</a> 
</div> 

<div style="position:absolute;width:100%;text-align:center;">Text and content to overlay on the image</div>

[Author]

Posts