I know a fair bit about HTML, CSS, jQuery but I haven't dabbled with PHP yet. I was given a code to help me apply a style to the webpage, only if it was a blog page:
<?php if(is_archive()){ ?>
<style type="text/css">
.wrap {
max-width: 1200px !important;
}
</style>
<?php } ?>
This, inserted into the header file, has worked perfectly since. On my return to work after a short absence I find that this code is still in the same place it has always been but is no longer effective? As the code gives the archive pages a max-width, these now look dreadful without it because the margin: 0 auto doesn't work either.
Take a look for yourself here. I'm not sure if this code is written correctly because I recently found that hostgator's file browser editor had added code to files I'd edited when I was out of office. Any help is appreciated but please bear in mind that I know nothing about PHP, other than where to copy and paste it.
You can try replacing your normal wrap class with this:
<div class="wrap<?php echo (is_archive()) ? ' full-width' : ''; ?>">
Then you can access this via #container .wrap.full-width {width: 1200px!important;}
Related
I'll try to explain the issue the best I can: I have two css uploads methods. The first one is with link rel and is working fine.
The second one (for performance issues), goes inside the css file and print directly the css into the page.
<!-- <link rel="stylesheet" href="<?php echo URL_SITE; ?>style/index.css" /> -->
<style>
<?php
$urlstyle = URL_SITE.'style/index.css?m='.(int) IS_ON_MOBILE;
$style = file_get_contents($urlstyle);
echo $style;
?>
</style>
There is absolutely no doubt about what is loaded. Those two methods returns the same css.
As an example we can use this part of the css
.wrapper-accueil .scroll:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: url("../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
As you can see, there is an url inside.
When trying to load the css with the first method, the path is fine. Everything works fine.
But here comes the issues, when I try my second method writting this css inside the file where it's called. The url path of the css is wrong. (I shouldn't have the first ../ to make it works.
But here is the thing. Even if this code shouldn't be working with the second method. The file is loaded properly with no problem. And I can't understand why it's working. (And the cache is cleared ne doubt about that neither).
More stranger things, when I upload the website on server and i'm no longer in localhost, then there is indeed an issue and the file isn't found as it should be.
So working in localhost while it shouldn't. Not working in server while it should indeed not be working.
But I have something more stranger again, I got an other website. Same framework (that means same folder/file structure), same css file, same way of including the file. And with this one using the second method, the file is found in localhost and in server too...while it shouldn't be working with none of them.
I hope you have any idea cause I'm lost at this point. Thanks.
.wrapper-accueil .scroll:before {
content: "";
display: block;
width: 30px;
height: 30px;
background: url("../../assets/img/picto/arrow-down.svg") no-repeat center center;
background-size: contain;
}
May be you have a folder containing picto has on another folder
I'm not sure I get 100% what your problem is, but it seems that you load your css with relative paths from two different starting points:
Loaded with link:
www.example.com/path/to/your/application/style/index.css
=> this loads the asset from:
www.example.com/path/to/your/application/assets/img/picto/arrow-down.svg
Included in site:
www.example.com/path/to/your/application/site.php
=> this loads the asset from:
www.example.com/path/to/your/assets/img/picto/arrow-down.svg
^^^
note the missing path due to "../" in your svg path
Maybe this is the answer to your problem, feel free to clarify if I didn't get you correctly! Please also check the developer console, especially the "Network" tab in Chrome and see what exactly is requested and double check the paths there.
Im currently making a poll website. And i were trying to change the font (to a custom font(font-face)) of the h1 tag but it doesn't work. But changing the color and everything else works. I have also tried changing the tag to p and giving it an id. The custom font works on all other pages but the poll php one.
#font-face {
font-family: Ubuntu-BI;
src: url('fonts/Ubuntu-BI.ttf');
}
h1{
color: #e9e9e9;
font-family: Ubuntu-BI;
font-size: 40px;
}
<style>
<?php include 'css/pollStyle.css'; ?>
</style>
<?php <!-- HERE'S THE REST OF THE CODE
echo "<h1>$title</h1>"; //< Title of the pole
I would really appreciate some help! :)
The PHP include construct does not output anything to the page. It includes the contents of a file into the current code base. What you want to do is put this into the HTML document head:
<link rel="stylesheet" href="css/pollStyle.css"/>
There is nothing wrong with the CSS itself, the problem must lay in the way it is included. As per miken32 answer you should use a link tag to attach the stylesheet. In theory the way you have specified would work as long as this code was within the <head></head> tags.
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 am using a very simple free Wordpress theme that I am really happy with but I cannot figure out how to move the names of the budgies along to the right:
http://swearingbudgies.co.uk/
I have tried Firebug to find out how to do this but the only tag I can see is a: - problem is when I apply padding-left to a: it also shunts the images along. Will this require changes to the html/php as well as the CSS to fix?
Add the following class in your CSS. Next time onwards don't come up with site url. Add your problem in fiddle/codepen or something like that and post here your code. Otherwise people will give downvote and close your question including me.
a.image_link + div
{
text-align:right;
}
try
#main-content div.post div{
text-align:right;
}
having a problem which is driving me crazy, reason being that it should be a really simple fix, basically in my "footer.php" file I need some lines of CSS added to the "wp_head" hook. What I expected to work was this:
<?php function footer_widgets() { ?>
<style type="text/css">
#footer {
border-top:0 !important;
margin-top:0 !important;
padding-top:0 !important;
}
</style>
<?php } add_action('wp_head', 'footer_widgets');?>
This does nothing, the weird thing is if I change the hook from "wp_head" to "wp_footer" it outputs to that hook fine, but this needs to be in "wp_head".
If anyone has any idea how to solve this it would be much appreciated.
Cheers,
Tom.
On a normal page, your footer.php isn't included until after wp_head has already run. See that get_footer() in your template? That's when this code runs. You need to include this code in a file that is loaded earlier in the page lifecycle (e.g. functions.php).