Wordpress header changes from page to page - css

I know this is very general, but I have a wordpress site (theme: Lighthouse by Outstanding Themes) where the site title looks perfect on the frontpage, but is all broken up on several subpages and other top-level pages.
All I've done is edit the site title with custom css with margin-left to make it not centered. The header is the same for all pages and the code should be the same as well. Does anyone know what could be causing the title to be perfect on some pages whereas the lines are all broken up on other pages?
Thanks !
The html is like this:
<div class="site-header">
<div class="site-branding">
<a class="home-link" href="https://homepage.com/" title="title" rel="home">
<span class="site-title">Title</span>
<span class="site-description">Site description</span>
</a>
</div><!--.site-branding-->
</div>
S

Related

WordPress adding paragraph tag around image

First, I am new to WordPress, second I have read all of the posts, blogs, etc. related to this issue and so far nothing makes sense.
I have a simple three page site. All three pages use this basic code at the top of the page to display a banner type image:
<div class="banner-section" style="background-image: url('/wp-content/themes/company/images/home-banner.jpg');">
<div class="banner-content align-centered" style="padding-top: 12.05%;">
<div class="row">
<div class="medium-6 small-6 columns"><img src="/wp-content/themes/company/images/home-banner-k-logo.png" /></div>
<div class="medium-6 small-6 columns"><img src="/wp-content/uploads/2018/10/company-new-combined.png" /></div>
</div>
</div>
<img class="main-img" src="/wp-content/themes/company/images/home-banner.jpg" />
</div>
Two of the pages work just fine. ONLY ONE of the pages, the contact form page, WordPress is wrapping the image in a paragraph tag. Why only this page? I could hack it by wrapping it myself and set some CSS to remove the margins. But why? Why would WordPress be inconsistent here?
WordPress automatically inserts <p> and </p> tags which separate content breaks.
To disable the wpautop filter, you can use:
remove_filter('the_content', 'wpautop');
It is might be because you are using contact form plugin or something , anyway you can add your own style but please do it on the child theme.

Problems with adding pictures to gallery page

I have a gallery page that looks pretty good, but I need to add my own pictures of myself and/or family... I've tried to do so but it isn't working the way it should.
Here a codepen of the problem: https://codepen.io/AJ2021/pen/EOWYvmenter code here
I need my photos to be in a shadowbox so I have a thumbnail on the page and when I click on it, it opens in a large view.
If the codepen has the exact same code your dreamweaver does, I found an error in the snippet.
It originally was:
" alt=""/> rel="shadowbox[picture]" title="a">
<img src="../Documents/SU Fall 2017/Foltz class/tmb_Lawtons_Marina.jpg">
</a>
Now it's:
<a href="../Documents/SU Fall 2017/Foltz_class/img_Lawtons_Marina.jpg" alt="" rel="shadowbox[picture]" title="a">
<img src="../Documents/SU Fall 2017/Foltz class/tmb_Lawtons_Marina.jpg">
</a>
It looks like the anchor tag <a> had closed too early.

how to fix wordpress logo multiple h1 tags

I have problem in my wordpress logo, when check in bing webmaster diagnostic tool, tell me i have multiple h1 tags, anyone know how to fix?
my site is https://xn--hxanfhlafbfwvgsh0akf7l.com and my wordpresss theme is colormag free version,
code is
<h1 class="logo">
<a href="https://xn--hxanfhlafbfwvgsh0akf7l.com/" title="Ηλεκτρονικό τσιγάρο νέα, κριτικές, συμβουλές στο άτμισμα" rel="home">
<img src="https://xn--hxanfhlafbfwvgsh0akf7l.com/wp-content/uploads/2016/12/Ηλεκτρονικό-τσιγάρο-νέα-κριτικές-συμβουλές-στο-άτμισμα-.png" alt="Ηλεκτρονικό τσιγάρο νέα, κριτικές, συμβουλές στο άτμισμα">
</a>
</h1>
Looks like it is in your template twice
<div
id="header-text" class="screen-reader-text"><h1 id="site-title">
</h1></div></div><div
id="header-right-section"><div
id="header-right-sidebar" class="clearfix">
<aside
id="text-2" class="widget widget_text clearfix"><div
class="textwidget"><h1 class="H1">
<img
src="http://www.xn--hxanfhlafbfwvgsh0akf7l.com/wp-content/uploads/2016/12/Ηλεκτρονικό-τσιγάρο-νέα-κριτικές-συμβουλές-στο-άτμισμα-.png" alt="Ηλεκτρονικό τσιγάρο νέα, κριτικές, συμβουλές στο άτμισμα"></h1></div>
So what you need to do, is locate where in your template it is putting it in twice, create a child theme, and remove one of those from the template
So you could do a search inside the them, for either site-title or class="H1" and you should then be able to find the template.
Hope that helps.

How to create a WordPress theme that use BootStrap?

I am pretty new in WordPress and totally new in BootStrap development (I have beginning to study BootStrap yesterday) and I have the following doubt about how create a custom WP template that use BootStrap from 0.
For example I have the source of this page made using BootStrap: http://www.html.it/guide/img/bootstrap/demo/home.html
and I want try to create a WP template starting by it.
Some time ago I have realized a standard HTML\CSS template for WP, can I use the same tecnique dividing the previous page into (header, footer, content, etcetc) and the put in these section the WP php code to show articles and other WP functions?
Is it the right way?
The other doubts is related to the upper slideshow, in this slideshow the immage are fixed and definied in a static way:
<!-- Sezione slider con Flexslider -->
<div class="row">
<div class="col-sm-12">
<div id="main-slider" class="flexslider">
<ul class="slides">
<li>
<img src="assets/img/flexslider/flex-1.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-2.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
<li>
<img src="assets/img/flexslider/flex-3.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
</ul>
</div><!-- /.flexslider -->
And what can I do if I want that the administrator can choose the immages that should be displayed from the backend (I think in the theme configuration panel)
Can you give me some ideas about how do these things?
Tnx
Andrea
I'm not 100% sure this will cover all your questions, but using Bootstrap with WP is the same as creating a regular theme with WP, you just include the additional bootstrap files and then use the relevant classes in your markup. Apparently there's also a plugin you can use: http://wordpress.org/plugins/wordpress-bootstrap-css/
The biggest difference is how to you will handle the menu-I usually use this walker to generate the it, and then I can use the default Bootstrap menu styles: https://github.com/twittem/wp-bootstrap-navwalker.
As for the carousel, try this: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/

Tumblr photo post caption positioning

I was hoping somebody would be able to help with the following query...
I've setup a Tumblr blog on which I'm going to regularly post photo sets.
I'd like to write a brief description with each set. I can do this
within the caption field that sits below the image. The problem with
this is that when including multiple images within a post the description
will be lost at the bottom, below all the images.
I'd like the caption to be positioned at the top of the post, before
the images so that viewers can read the description first.
Here's a link to the blog, though empty for now I've inserted a test
post to show how the information is displayed. The black block
represents an image set,'Coming Soon' was entered in the caption field.
http://rg-e.tumblr.com/
Any thoughts/or guidance would be greatly appreciated.
Thanks.
Would need to see your theme's code to provide you with specifics, but you just need to move where the {block:Caption} is being rendered.
An example:
{block:Photoset}
{block:Caption}{Caption}{/block:Caption}
{Photoset-500}
{/block:Photoset}
This will put the photoset's caption above the photoset.
Just to expand upon graygimore's answer - changing the position of the {block:Caption} - Here's the exact code I modified from my custom tumblr theme. Worked a treat.
Thanks again.
{block:Photo}
<section class="caption group">
{block:Caption}
<div class="cont">{Caption}</div>
{/block:Caption}
{block:ContentSource}
<div class="cont content_source">
<a href="{SourceURL}">
{lang:Source}:
{block:SourceLogo}
<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}
{SourceTitle}
{/block:NoSourceLogo}
</a>
</div>
{/block:ContentSource}
</section>
<section class="top media" style="display:block;">
{LinkOpenTag}<img src="{PhotoURL-HighRes}"> {LinkCloseTag}{Question}
</section>
{/block:Photo}

Resources