Being new to Wordpress, and to the way their themes work in general, I have been having a few issues regarding the header section.
With lots of troubleshooting I have fixed most of my programs, but one seems to keep managing to allude me, and that is putting a div at the top of the page, in front of the header image.
Essentially, the header image seems to act as always up front when it comes to anything in the header.php files. I have looked around both here and the site, but I cannot find anything to cure this ailment.
I started by removing the header image entirely, and inserting my code into the custom-header.php file
<div class="whatever"><img src="whatever i put here"> | <p>words</p></div>
At first, this worked and everything showed up directly as the top as I wanted it, however, once I reinstated the image, it once again filled the entire header and send the divs behind it.
Does anyone know of a way to move this Div to the foreground?
With a little css you can achieve that.
First, I would suggest to use an id for this additional <div> element, as most probably this will be some kind of special tag.
I assume that you were trying to place this div before the <header id="masthead" … part in the header.php of the 2017 Theme like so:
// Existing code …
<div id="whatever"><img src="whatever"> | <p>words</p></div>
<header id="masthead" class="site-header" role="banner">
// Existing code …
Having that in place, you can bring that div into front with some lines of css:
#whatever {
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
You can place that anywhere in you style.css.
Related
I am trying to split my Bootstrap page into three parts - header.php, (page).php, footer.php and I am having trouble with an automatic insertion of a margin-top inline style on load. This isn't in my actual code and I can't find it in the style sheets.
The page looks perfectly fine prior to the split ( http://tinker.help/New_Site/index.html ).
When I split it into components header_th.php ; index.php ; footer_th.php ( http://tinker.help/New_Site/index_splitwrong.html ) the elements all come in and load, but I now have a large white space between the bottom of the index.php content and the beginning of footer_th.php content. If I look at the code in Web Developer tools, there is an inline style being set for the margin-top on the Footer element as follows: footer id="footer" class="dark" style="margin-top: 509.2px;
Clearly, this is coming from something calculated as no-one would set such an odd margin manually and it will disappear if I set the inline style to footer id="footer" class="dark" style="display: inline;" to disable any top or bottom margins (although it hoses all of the other formatting to do that.) I can't override this using footer id="footer" class="dark" style="margin-top: 0px !important;" in my code. Changing it in the Web developer tools fixes it but it is overridden by this automatically generated code and it doesn't stick if I update my code.
I assume I have messed up the divs somehow in the split, although I used the Web developer tools to make sure I was getting all of the code pieces cut from the consolidated index.html page and to ensure I didn't duplicate or miss and open or close div bits in the split pages.
Any advice? I am new to straight Bootstrap HTML5/CSS/PHP programming and have never tried to split the header and footer manually like this.
Thanks in advance.
OK, I somehow messed up my splits. When I started from blank pages, it worked fine. It's also possible that I was loading my js libraries twice as the template loaded them in the head section and I was moving them to the end and may have duplicated them. Thanks all.
If you like to override that margin-top, you can add !important to your CSS value like this:
#footer{
margin-top: 0px !important;
}
But make sure that you add this in your CSS style file or within a new <style> block in that page.
Regarding the automatic margin insertion, probably it's done by one of your Javascript code. Have a look at it!
Here's the fiddle: https://jsfiddle.net/8y6vw1gr/
tl;dr
What other dynamic solution can be used to set the background-image: url() for a page without using the HTML style="" attribute?
My page starts with 13 elements where I set their url(), when you scroll to the footer our lazy-loader will then load 9 (up to 12) more elements that again have their own unique "dynamic" images set.
I think we'll just have to take a hit to our SEO score, as I don't believe a better solution is available.
NOTE: I can create a JS Fiddle if needed, but I think this is described well/generic enough that it's not needed. Please let me know if this is needed for answering.
Purpose
Our company is trying to improve their site SEO score, one of the items identified for us to fix is to move all HTML style attributes into a single CSS file (or <style></style> declaration). I believe the reason this is being called out as an issue is because we have several elements using this to set their article background-image: url();.
Why not just use <img> tag instead?
Our client has alot of different type of images (dimensions, center of focus, etc) they want to use when publishing an article. In order for us to have the most consistent design regardless of screen size is by using CSS background-image styles instead of an <img> HTML tag. We're also working with some WP/XMLRPC publishing constraints, where we're not able to create a custom solution for this.
So we cannot use HTML for this, if we could this would be an easy fix.
Why this is currently set in the style attribute?
This is the best "dynamic" solution we've found so far. Up until now (with this effecting our SEO score), this has never been an issue. In our CSS styles, we have our .class {} specific background image styles that are shared. The only thing that differs for each article is the image URL, so we set that in the style="background-image: url();" attribute dynamically through PHP.
The problem
My page starts with 13 elements where I set their url(). I "could" have inline CSS at the top where I set dynamic classes for these elements that will have their unique background-image: url();'s, this could work even if it sounds painful to setup/do.
BUT we have lazy-loading happening when you scroll to the footer. We load 9 (up to 12) more elements that again have their own unique "dynamic" images set, all via AJAX. I could do the same thing here, creating another inline <style></style> CSS bit... but here's the kicker. One of our other SEO complaints is for us to combine our multiple inline CSS (as well as JS) into a single declaration. If I keep creating more <style></style> declarations to fix this SEO issue, I'll create/worsen another SEO issue.
The Question
What other dynamic solution can be used to set the background-image: url() for a page without using the HTML style="" attribute?
I think we'll just have to take a hit to our SEO score on this one, as I don't believe a better solution is available.
An idea is to change the background-image inline style with a data attribute that has no effect on the SEO score, then you may add some JS code in order to change them as inline style.
Of course this may have an impact on other script as I don't know excatly how your site is built so you may add this JS code as the first JS code so that all your inline style are changed and you have them ready for any futur script.
$('.box').each(function() {
var url = $(this).data('background');
$(this).css('background-image','url('+url+')');
})
.box {
width:100px;
height:100px;
display:inline-block;
background-size:cover;
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-background="https://lorempixel.com/400/200/">
</div>
<div class="box" data-background="https://lorempixel.com/300/200/">
</div>
<div class="box" data-background="https://lorempixel.com/400/400/">
</div>
By the way we can generalize this solution to any inline style. So the idea is to have all the style set as a data attribute and then we simply change them to inline style:
$('[data-style]').each(function() {
$(this).attr('style',$(this).data('style'));
/*Not mandatory*/
$(this).removeAttr('data-style');
})
.box {
width:100px;
height:100px;
display:inline-block;
background-size:cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-style="background-image:url(https://lorempixel.com/400/200/);padding:20px;border-color:yellow;">
</div>
<div class="another-box" data-style="background-image:url(https://lorempixel.com/200/200/);margin:20px;border:5px solid pink;height:50px;">
</div>
<div data-style="background-image:url(https://lorempixel.com/200/200/);height:200px;">
</div>
NB: as I commented above, we need to have a balance between the complexity of the site and the score we obtain. If we can easily obtain 80% no need to over complicate the site in order to have 85% or 90% and maybe create some bugs or make the maintenance of webiste site difficult.
Alright, so I have an HTML form and I want to be able to use that form to upload links to my database and then have the links displayed on an updated page. Everything works fine, but my issue is that whenever the link is retrieved and displayed from the database, I am unable to make changes to the CSS. For example:
This is a Great Site
is what I would enter into the form, this would be saved to the database, and the output would be:
This is a Great Site
my issue is, I am unable to change any of the link styles outside of color and other inline CSS options. I am unable to change things like what color it appears after the link has been clicked on, or what kind of action it does when hovered over.
What would be the easiest way to go about this? Is there a simple CSS workaround that I'm missing or am I going have to do something a little bit more complex?
Thanks in advance.
Assuming you show these links in a fixed place, add a class to the element that contains these links. This will safe you the trouble of adding a class to every link you add.
<div class="container">
This is a Great Site
</div>
Then you can change the CSS of these specific links with:
.container a {
color: green;
}
.container a:hover {
background: yellow;
}
I don't get your question.
Your link is 'www.stackoverflow.com'.
You output your link as
This is a Great Site
What prevents you from outputing a class or style attribute?
This is a Great Site
This is a Great Site
<a class="myOtherLinkClass" href="www.stackoverflow.com">This is a Great Site</a>
<style>
a.myOtherLinkClass,
a.myOtherLinkClass:hover,
a.myOtherLinkClass:active,
a.myOtherLinkClass:focus{
color: #d5d5d5; //Alternative add !important to the value
}
</style>
Try it like this. Be sure to put this into your .css-File without the <style> tags and put it after your "a"-Definition.
I have recently set up my wordpress site, but the comments section below each post spans the full width of the screen, rather than following the margins used in the rest of the page. How do I set the margins to be the same as the rest of the page for this section?
Either your footer elements need to be within the container ID div tag. Or they must be wrapped in their own div with an ID or class given the style
#footerWrapper {
width: 768px;
margin: 0 auto;
}
This will center and align them to the main container div. It's most likely the wordpress functions were moved around in the template files.
The footer on your home page you'll see is wrapped in
<div id="footer" class="full left"></div>
So someone messed up your single.php template file. That's it because your index, pages, archives are all ok so whatever template most likely single.php needs to be edited.
How to make an external PHP widget page have its own CSS.
The catch is - when the external page is included it's been affected by the stylesheet of the host page.
The included page is actually a comments 'widget' (with his own .css file, about 30 lines, not much) and the height and width flexibility are a MUST HAVE.
The PHP include was so far the best solution, but I lost my hair adjusting its CSS file to fit / null (adding/excluding/ styles) any possible host web page.
Example:
if the host page has styles for img borders I have to null them from the widget's style.css, same for H3, P, and so on.
How would you preserve a widget stylesheet from being affected by the host page styles, beside using iframe?
You know CSS is a client-side thing; it doesn't know about PHP and how the page has generated on the server.
You have got to focus on the final resulting HTML and redefine tags and classes and IDs so that your desired style rules apply to right elements.
You can limit the scope of CSS rules by surrounding that part in a div with a unique ID or class and use it in your CSS selectors so they wouldn't apply to elements outside of that div.
Or if you can't do that you have to use stronger rules to override included ones for your other elements. Which will be a little messy, but you can override styles applied to an element using several techniques like !important or having more selector parts.
For example, in both of the below samples, the second rule will overwrite the first one:
#comments .link { color: red; } /* Included page rule */
#header .link { color: blue !important; }
or
#comments .link { color: red; } /* Included page rule */
#header div a.link { color: blue; }
You might want to apply a mini CSS reset on your included code. Surround your code in a unique id, like so:
<div id="widget">
<!--your code here-->
</div>
Now apply the reset to everything inside this, using a basic CSS reset like Eric Meyer's, available here: http://meyerweb.com/eric/tools/css/reset/
Now, apply your own CSS. Nearly all outside CSS will be wiped out, and yours will be applied.
Try surrounding your widget code in a div with an id. Then prefix each CSS selector used in the widget with that selector.
ex.
<div id="widget"><p class="nav">hello</p></div>
instead of,
.nav{
// styles
}
do
#widget.nav{
// styles
}
CSS Styles prioritize like this:
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
Depending on how much CSS you need to apply, you could writ it on the "head" tag.
Hope the suggestion helps.
If I understood correctly, your included page has some CSS rules such as:
div {/*rules*/};
p {/*rules*/};
and so on.
You should change your CSS selectors from the most general ones (div selects all the divs in the page) to the most particular ones (use them in this order: id, class, child-selector) in order for your rules to apply only to your included elements.
For example, say your included page is wrapped in a div, the PHP code would be:
<div id="my_page">
<?php include "myPage.php"; ?>
</div>
Then, all your rules for the page should refer only to the children of the element with the id my_page:
Instead of
div {/*rules*/};
you'll have
#my_page div {/*rules*/};