I just set up WordPress and tried to install a theme. All is good, but for one simple issue. I know how to make an image dynamic a image in the beginning to set up my index.php, like this:
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="" />
but how to make an image dynamic which is called by css
.portfolio {
background-attachment: fixed;
background-image: url("../img/o-BUSINESS-TECHNOLOGY-facebook.jpg");
}
I've tried so many times but fail. Please suggest some ideas.
You should note that Wordpress has an standard way to add <script>s and <style>s to the <head> section of your web document, which is using wp_enqueue_scripts action, but regarding your question, I will try to provide the desired way:
You may put that particular CSS in <style> tags in your documents <head> section and use:
.portfolio {
background-attachment: fixed;
background-image: url("<?php echo get_template_directory_uri(); ?>/img/o-BUSINESS-TECHNOLOGY-facebook.jpg");
}
UPDATE
Although, this seems to work and let you have the desired output, I strongly recommend you do not use it, because you may use:
.portfolio {
background-attachment: fixed;
background-image: url("img/o-BUSINESS-TECHNOLOGY-facebook.jpg");
}
in your style.css file and still get the same result.
I really do not know what kind of dynamic CSS, are you after, but If you really want it to be dynamic and you are sure about what you are doing, you have two methods:
The above method (adding styles to <style> tag in <head> section of document)
making your stylesheet file dynamic, using PHP (which you may get a tutorial on this link, or google for dynamic stylesheet php)
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.
Im quite new to using Redux Framework for creating a Wordpress options panel.
I have created a option to change the width of a logo img.
But i dont know what would be the best way or practice of the following:
Just target the css and output the width.
.logo img {width:/* css output */;}
Use php to call the option.
global $redux;
<div class="logo">
<img width="<?php echo $redux['logo-dimensions']['width'];" />
</div>
I would like to think number 1 is the best.
But what would be the best practice of these, and/or is there a better way than this? Pros/cons?
I would like to understand abit deeper why or why not.
Would appriciate a good answer :)
In case with <img>, it is allowed (by HTML5 standards) to use inline width and height attributes, which would probably be more effective for page rendering, considering your css is an external file.
However, if you include some of your inline css to prevent content rendering block and the logo image width is declared, the CSS solution would be equally effective.
I think the below given code will be more efficient for css image output:
.logo img {
background-image:url("/imgPath");
background-size: 80px 60px;
background-repeat: no-repeat;
}
I have wordpress sidebar with:
<h3 class="widget-title">TITLE OF SIDEBAR</h3>
and I need show small icon before "TITLE OF SIDEBAR. Can I do with CSS?
Or I must manually add image into code? like:
<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>
Pseudo elements will do what you want. Using the :before pseudo element, your CSS would look like this:
h3.widget-title:before {
content: url('/path/to/image');
}
This will place an image before the text content of the <h3>, however this won't change the DOM at all which is important to note.
A good explanation of how pseudo elements work can be found here, on CSS Tricks.
If your image is 10px wide, you could try this:
.widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}
Keep your h3 tag without including img tag, and do the following:
h3.widget-title {
position: relative;
padding-left: <width of the icon image>;
}
h3.widget-title:before {
content: '';
width: <width value>;
height: <height value>;
position: absolute;
left: 0;
display: block;
background: url(<path of the icon image>) no-repeat;
}
.widget-title:before {
content: url(path/to/image.png);
}
You can find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/content.
h3:before {
content: url('https://www.google.com/images/srpr/logo4w.png')
}
Sample http://jsfiddle.net/KCXVM/
Yes, you can do it in CSS.
Simply use the :before pseudo-selector, like this:
widget-title:before {
content:url('imagename.png');
}
Or, of course, use h3:before { ... } for it to apply to all h3 elements.
Here's a working example for you
Browser compatibility: This works in all common browsers, except IE7 or earlier.
Why not simply apply the image as a background?
.widget-title {
background: url(...) no-repeat 50% 0;
padding-left: 20px;
}
So, at first, I thought a <span> thing would work.
Then, I tried this, and it worked seamlessly:
h3:before{
content: url('your url');
}
You can add icon before each h3 heading in CSS by following these ways below (via OIW Blog):
- Use Glyphicons of Bootstrap
If you are using Bootstrap then you can use Glyphicons to add icons to the desired title or text.
Bootstrap contains a diverse set of icons, to pick up a suitable icon you can take a look at here: https://getbootstrap.com/docs/3.3/components/. Once choosing a desired icon, adding it to theme is a piece of cake. You just need to add the card after the location that you want your icon to be displayed
<span class="glyphicon glyphicon-ok"></span>
Notice that the icon I added is “ok” so its class shall be “glyphicon-ok”. Each icon (in the list I mentioned above) is compatible to a different class.
- Use icons of existing Cheatsheet of the currently used Font or third party
If your website don’t use Bootstrap or the current set of icons of Bootstrap doesn’t meet your need (despite containing a lot) (Glyphicons of bootstrap has displaying errors on IE10 of Window Phone OS). After that you can check what font of the website you are using is and find out if it has an icons Cheatsheet library or not. For example: Elusiveicons, Fontisto, Material Design… are some of the fonts that have icons Cheatsheet which are for immediate use.
If your currently used font of the website has Icons Cheatsheet then you can have a set of icons of the third party. Here I would like to introduce “Font Awesome Icons”. This is a good-looking and popular set of icons.
To use this set of cons, you need to add this code to the head section in your website:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
– After adding CSS, you can use this code to put in the HTML which shows icons (you can apply this method to the part you use Cheatsheet of the font as mentioned above. Some fonts have unique way of using)
<i class="fa fa-edit"></i>
– If you don’t want the code in the HTML, you can just use CSS. With CSS you need to find the Class or ID of the part that displays icon and after that use the below CSS code to display it. Here I display the EDIT icon of the third party “Font Awesome Icons” before (::before) the title, along with 2 properties of padding-right and font-style (you can also display it after the title by using after property):
span.last-updated-time::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}
Notice: the code of content is hexadecimal code. You can find and replace it with the code of the currently used icon. With “Font Awesome Icons” you can find it here: https://fontawesome.com/cheatsheet
I need my administrator to be able to change/update the banner of my site.
This is the banner code
<div class="containertop">This depends on the background of the div</div>
and this is the CSS for that
.containertop
{
width:1000px;
height:300px;
**background:url(../images/1.png) no-repeat center;**
margin: 0 auto;
margin-top: 40px;
}
What I would like to happen is the same as a Facebook cover photo.
When a new banner is uploaded, the CSS will be updated(something like that).
But of course, the new banner must be fetched from the database.
So I am thinking that the CSS would become like this:
Fetch the saved banner source and then:
background:url(<?php echo $row['image']; ?>);
but can I do the PHP connection to database (include 'dbname.php') inside a CSS txt?
There's nothing preventing you to serve a css generated by PHP. That's even easy.
Simply start your php file like this :
<?php
header("Content-Type: text/css");
I agree with Ben. If you make a little embedded css section in your page, you could put the .containerTop css code there. Then, put your code in the page.
So, in your actual web page, put this:
<style type="text/css">
.containertop{
width:1000px;
height:300px;
background:url(<?php echo $row['image']; ?>);
margin: 0 auto;
margin-top: 40px;
}
</style>
Of course, your background url will not update until it is reloaded. If you decide to do it this way, don't forget to take the .containerTop definition out of your existing css.
Having said all that, I really like dystroy's answer. Very nice. I never thought of doing that.
You can set containertop background while loading php file.
<?php
echo "<style>.containertop{ background:url(../images/".$row['image'].") no-repeat center;}</style>"
?>
This will set the background fetched from db.
Well, You can use jQuery to change/overwrite the CSS file.
Example -
$('.containertop').css('backgroud','url(images/change.jpg) repeat');
or
$('.containertop').css('backgroud','url(<?php echo $images_url ?>) repeat');