I'm currently turning a HTML page into a WordPress theme. Throughout the site I have a series of divs that use CSS backgrounds. What is the best practice for linking those images, so the user can change them as they please?
For reference, in the HTML, I have: background-image:url(/site/sprite.png);
You can use custom fields. If you don't know how to make them or you want an easy and robust way to manage them you can find the "Advanced Custom Fields" plugin in the wordpress.org plugin repository. It's free and it's very nice.
The way you would use custom fields here is because you will set those backgrounds with inline style to your theme. Otherwise "the user" will have to know how to change a CSS line of code (not very practical).
If you set them inline they would look something like this:
<div id="divBackground01" style="background: url(<?php echo get_post_meta('$post->ID','div-bg-01',true); ?>);>
</div>
Another option that I've seen people do is make the CSS file in a PHP file... you would use something like:
<style>
#divBackground01 {
background: url(<?php echo get_post_meta('$post->ID','div-bg-01',true); ?>);
}
</style>
Note that it's using PHP because the file would actually be a PHP file... otherwise you can't use PHP in a CSS file. Not sure that it's a very good practice to do this, but it's something doable as another option if you want.
Best to stick with adding the background style inline with the custom field. You can use PHP to make it conditional if needed and you can probably setup 1 post (so you have single ID) with all the custom fields... or whatever way you would prefer to present it to the user is your choice.
Related
I'm building a digital archive using Omeka Classic and I would like to place little flag icons that link to versions of my site in different languages in the header, so I’m trying to figure out how to tinker with the theme’s code (The theme is Minimalist). I don’t have a ton of programming experience, but I think I need to go to /themes/minimalist/common/header.php and add a php echo statement within the <div class="site-title"></div> tag to place my icons within the header section. And that’s as far as I can get on my own.
Questions:
Do I need to define my icons as a variable somewhere and then write an echo statement to the effect of: <?php echo VARIABLE; ?> Php at this level is above my head, but it looks like this is how content is being generated.
Could I add an echo statement in the location suggested above without using a variable or constant? Maybe something like this? <?php echo <a class="lang" href="URL to Arabic language site"><img src="URL to flag image"/></a>; ?> And then I could style the .lang class to push the flags to the bottom right corner of the site-title div.
Just wanted to ask before I start experimenting and break the site.
In one of my php functions I add some quite simple css. It worked very well until today. Actually the css is still doing his job, but in addition it prints in the middle of my layout whatever is written between the <style></style> tags - in my case it shows .element {display: none !important;} .
My code:
echo'<style>.element {display: none !important;}</style>';
Has there been any update to php or WP that doesn't allow this anymore? Is there any other way to do this?
Thanks a lot for your help!
I am not sure if it might change anything, but can you try print?
Also I think if <style> is not within <head></head> it will not work.
I found a working solution. Previously, I had a function in functions.php, which did some user type specific PHP and also CSS. Now I removed the CSS from functions.php and added it to header.php just before </head>.
The function is in two places now, which I wouldn't prefer, but it works very well.
Still a riddle to me is, how the echo "<style>...</style>"; used to work in functions.php for approx. the last 6 months or so and then suddenly yesterday created mentioned issue.
Btw, I also tried ?><style>...</style><?php and print "<style>...</style>";. All created the same issue. Again, the "<style>" was not shown on the browser, only whatever was inside. Also, the CSS worked. Whatever, statements I entered was interpreted as correct CSS, but in addition also shown as text right between the layout. Here is an example source code at the browser at my example page :
source code at browser
if you wanna to add a custom style to your WordPress theme (that probably you do not design it) its better to add it to custom styles from your admin area.
I have a WordPress site that is running the Moderne theme - https://wordpress.org/themes/moderne/.
It's definitely my favourite so far and really matches what I want my site to be. But what I'm struggling to figure out is how to change my site title so that I can have separate colours, to match my logo, which is white-yellow-white.
I know that I can edit the colours itself through style.css, but I just can't seem to figure out how to separate out the sections.
This is my site: http://nobetterdan.com/.
Ideally, what I want to try and do is -
no in white
betterdan in yellow
the full stop at the end in white
It's probably super easy, but just not sure.
This can be accomplished via javascript.
var _title = document.querySelector("#site-title a");
_title.innerHTML = _title.innerHTML.replace("no","<span class='logo-white'>no</span>").replace("betterdan","<span class='logo-yellow'>betterdan</span>").replace(".","<span class='logo-white'>.</span>");
body{background:#000}
.logo-yellow{color:yellow}
.logo-white{color:white}
<h1 id="site-title">nobetterdan.</h1>
This is a little more complex than it seems, because in CSS, you can only target the first letter but the not each individual letter inside a word:
h1::first-letter {}
https://www.w3schools.com/cssref/sel_firstletter.asp
You have to seperate the page title to the units you want to have (header.php in the folder of your theme):
<h1 id="site-title">
no<span class="yellow">betterdan</span>.
</h1>
So you can target this characters in your CSS:
.site-title { color: white; }
.yellow { color: yellow; }
This way you cannot make use you the <?php echo get_the_title(); ?> function in the header.php of your theme. But if it is a ok for you to write the title with no dynamic value, you can simply adjust this in the file that contains your h1 tag.
Important: You are using a theme, which can have updates sometimes. Keeping this up to date is important, so if you are doing changes in your theme files, make sure to have a child theme running, so your parent theme files are overwritten and can be update when needed. This is a nice and easy tutorial for creating a child theme: https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/
Another way would be to use javascript for the coloring of your headline. There also is a jquery plugin for this: http://letteringjs.com/ But I think for this single use case, for styling the title of your page, this would be an overload and much code you actually don't need. So the way using the span and css would be the more appropriate way.
I am completely new to PHP (2 weeks) and I have created a simply script for Joomla that will save parameters from my my admin area options and put those values into a CSS format and save the file. It's a whole long script of CSS but here's an example of it...
<?php
ob_start();
?>
<?php
////////////// Custom colours set from the admin panel
if ($this->params->get('templateColor'))
{
?>
/* <?php echo($template); ?>: Custom Auto-Generated CSS Colors As Set in Admin Template Parameters */
body.site {
border-top: 3px solid <?php echo $this->params->get('templateColor');?>;
background-color: <?php echo $this->params->get('templateBackgroundColor');?>
}
<?php
}
?>
<?php
$googlefontcss = ob_get_contents();
ob_end_clean();
file_put_contents('templates/'.$template.'/css/googlefonts.css', $googlefontcss);
?>
Heres my problem, all of these things are stored in a helper file which is called from my index file, but this has the effect that the CSS file is created every time that the page is loaded rather than when I adjust and save my params in the backend. Surely, if I got a lot of traffic, this is going to stress the server even though the css file is quite short (its longer than shown here).
Being a newbie, I have no idea how I would avoid this problem and instead only have the file written when the options are changed and saved. Anybody suggest a better way?
I'm really confused about why you would do this at all. First, Joomla has a way to save parameters for a template and to use them, which you are doing. It also has a standard way to include a css file in your template. You can do this easily with a plugin if you don't want to addStyle() directly to the the template file. Also for google font api just look at how protostar does it.
I really think you need to look at how templates work in Joomla --- it's not modifying the core to modify your template index unless you are using one of the included templates --- in which case copy it, which you can do with one click in 2.5 and 3.
If you really absolutely have to do this, make a plugin. There are a lot of examples in the JED of plugins to include a file in a template. http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/head-code
I'm providing a way for my users to change the CSS of their user pages by entering some CSS in their settings page. Here is the HTML:
<textarea class="code" name="Settings[css]"></textarea>
In the controller:
$model = new Profile;
$model->css = $_POST['Settings']['css'];
I currently don't validate the input for the CSS field. I was wondering if I could filter the CSS so that they couldn't put harmful code in to the page. For example, they could do:
</style>
Now I can put bad code in to your page
I don't think purifying css with HTMLpurifier would be appropriate because CSS usually contains special characters, but correct me if I'm wrong.
Thanks
This has nothing to do with Yii in any shape of form.
The "invalid code" that you provided in example could be easily removed, if you include the User CSS as an external file.
And that is not all they can do with CSS. You should manually remove following entries:
line containing behavior: url( .. )
all instances where !important is used
entries which contain selectors to specific ID, like #ads and #logo
strip_tags() can remove html tags from the input, though I don't think it's the only thing you have to worry about.
An easier solution may be to load this style through an external stylesheet (<link rel="stylesheet" type="text/css" href="userstyle.php?uid=1235" />) instead of an inline style block, that way there's no way to break out.
You could try a php css parser like this:
https://github.com/sabberworm/PHP-CSS-Parser
But I can't tell you anything about the quality of code it produces or how it handles problems with input.
What I do know is that LESS has good debugging usually.
If you use the LESS php class you could build a system where the $_POST['Settings']['css'] is used to create valid CSS. Or if errors occur you can catch them and return that to the browser.
Yes this effectively enables you to use LESS syntax in the field but I don't see the harm in that. LESS is in some ways stricter in the syntax of CSS through, requiring semicolons regardless of if its the last property in the list and extra characters can also trigger errors.
The debugging information for the javascript version is pretty solid though, I can't personally vouch for the PHP class since I only use the JS, but from what I hear its the second best thing after the JS.
http://leafo.net/lessphp/
http://lesscss.org/