i have this div class in style
.page-banner{
background-image:url(../images/background-sec1.png);
background-repeat:no-repeat;
and I've tried to create a new div in the same style with the same declarations but with a new name .page-banner-category.
.page-banner-category{
background-image:url(../images/background-sec1.png);
background-repeat:no-repeat;
and ...
<div class="page-banner-category">
but it does not work,what am i missing here?
Can you provide your HTML code as well to see how you use them? It is difficult to say right away what went wrong.
Also, in your CSS code you don't have to create 2 declarations, you can just use a multiple selector:
.page-banner, .page-banner-**category**{
background-image:url(../images/background-sec1.png);
background-repeat:no-repeat;
}
It will be easier down the road to update them when needed if behaviour is completely
here is.
<div class="page-banner-category col-md-10">
<?php echo single_cat_title('', false); ?>
<div class="theme-breadcrumb">
<?php niche_custom_breadcrumbs(); ?>
</div>
</div>
</div>
Was published before, this is for PHP, and what I try to do is just change the image banner in X category.
Thanks for you reply.
Related
Your help would be immensely appreciated and thank you in advance to the audience.
I am having a small problem of CSS and .tpl files. I am currently building a site for a client using weebly cms. Which is great. However they are now using 'less' instead of normal css. This means they have partials and variables included now. Which I am unfamiliar with. I simply want to align some text to 'center' which is always a straight forward process in traditional CSS. In this case. the div class for the text in question lies within the .tpl file in 'partials' There is no class associated with the text in the normal CSS file.
I'd like to know if I could add the class within the normal CSS from the .tpl file. I have tried using the same class name from the .tpl within CSS using id tags and class tags i.e # and .
However with no success. Im sure it is relatively straight forward but I cannot get my little head around it.
Any help would be superb, Happy new year all!
Thank you
This is the .tpl code in question, as you can see the class names are simple.
wsite-com-product-price
wsite-com-price
wsite-come-catergory-product-price
<div class="wsite-com-product-price {{price_class}}">
<div class="wsite-com-price {{!
}}{{^is_featured}}wsite-com-category-product-price{{/is_featured}} {{!
}}{{#is_featured}}wsite-com-category-product-featured-price{{/is_featured}}">
{{{price_html}}}
</div>
The CSS relating is this: the first line is my attempt at making this work:
.wsite-com-price .wsite-com-product-price .wsite-com-category-product-price {
text-align: center;
}
I simply would just like to align the price to center:
The following is the HTML from view source on the page, (how i found the class names, but they are in .tpl file not the css!)
<div class="wsite-com-category-product-name wsite-com-link-text">
Merola Choker 1
</div>
</a>
<div class="wsite-com-product-price ">
<div class="wsite-com-price wsite-com-category-product-price ">
£125.00 - £165.00
</div>
<div class="wsite-com-sale-price wsite-com-category-product-price ">
£125.00 - £165.00
</div>
</div>
</div>
</div>
<div class="wsite-com-category-product wsite-com-column " data-id="5">
<div class="wsite-com-category-product-wrap ">
THANK YOU SO MUCH FOR ANYONE INTERESTED!
CORRECT ANSWERS SCREENSHOTS BELOW>>> THANKS!!!!
Try to use:
.wsite-com-category-product-price {text-align: center;}
As combinations of other classes might not always work.
Or:
.wsite-com-price, .wsite-com-product-price, .wsite-com-category-product-price {text-align: center}
To cover all price related classes.
.wsite-com-price .wsite-com-product-price .wsite-com-category-product-price {
text-align: center;
}
Here .wsite-com-price is expected to be parent class, which is not there in your tpl. (or did i missout).
.wsite-com-product-price, .wsite-com-category-product-price {
text-align: center;
}
Try this if, this works, they you missed the parent class.
I have a piece of text that I am trying to change the font color for on my site. The code is showing up correctly and I have read some other forums and tried to modify the code myself using HTML font color and PHP style but I can't seem to get it to work.
I am not a programmer myself, so I am most likely making some kind of rookie mistake. The code currently installed on the site is below:
<div style='text-align:center'>
<?php
ini_set('default_socket_timeout', 3);
echo file_get_contents('https://www.mysamplesite.com');
?>
</div>
I actually do not care if it is center aligned or not if I can get it to show up in white font, but I can't seem to be able to get it to show in white font.
When the sample code loads it brings back certain text that displays on the front of my my site. Can someone please tell me how to format this code properly to get it to show in a color of font of my choice? Your help would be greatly appreciated. Thanks!
All you need to do is a add a color declaration:
<div style='text-align:center; color: #FFFFFF;'>
Keep in mind that any inline style tags may overwrite the parent's style properties.
Try this code.
<div class="code">
<?php
ini_set('default_socket_timeout', 3);
echo file_get_contents('https://www.mysamplesite.com');
?>
</div>
<style>
.code, .code *
{
color: #FFFFFF!important;
}
</style>
On my webpage there are DIV's that are created dynamically with the class of jOUT.
I want to change the color of every other iteration of the class.
I'm trying to do it this way:
.jOUT:nth-child(even){
background:#eeefff;
}
.jOUT:nth-child(odd){
background:#cccffe;
}
My HTML is as follows:
<div id="outData">
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT isOpaque">
<!-- ... -->
</div>
<input type="hidden" name="outDivider" value="-------">
<div class="jOUT">
<!-- ... -->
</div>
</div>
Full HTML here
But it's not working. What's really weird is that using the console in Chrome, when I select each jOUT, it shows ALL of them as having the "even" attribute.
I thought for sure that I had invalid CSS or HTML but I can't find it. It has to be something I'm doing, but what? I guess what I'm asking for is an idea for a place to start looking for the problem. I've verified the CSS using w3c CSS verification, and the HTML using HTML Tidy.
Your current CSS is working as it should, because you're targeting ALL children (including input); which means, in this scenario, all your div.jOUT are even - you should rather use :nth-of-type, which will only target instances of div.jOUT ...
.jOUT:nth-of-type(even){
background:#eeefff;
}
.jOUT:nth-of-type(odd){
background:#cccffe;
}
DEMO fiddle
This would work here:
.jOUT:nth-child(4n){
background:#eeefff;
}
More on that
This is somewhat fragile, though. A better approach is to add an alternative style class on those elements, possibly via your server-side app.
Your input[name="outDivider"] elements are in the way, thus making every jOUT element even. Here's a working pen where I took them out and made the selector work properly. I also changed the colors, so it's easier to see.
Edit: #isherwood beat me to it, but if this input[name="outDivider"] elements are absolutely necessary, his solution works best!
I'm trying to adjust one paragraph of two in the same div, I'm not sure how to do this but I tried to give one of the paragraphs a class, as a result they both started to respond on just p without any unique name. I'm not sure why or is there a better way to do this?
Thanks in advance!
Css:
.col_12 p1{margin-left:240px; position:relative;}
Html:
<div class="col_12">
<h3>Contact</h3>
<p><?php show_post('contact'); ?></p>
<p class="p1"><div id="map_canvas"></div></p>
</div>
.col_12 p1{margin-left:240px; position:relative;}
won't work because you missing a . before p1
your css should be:
.col_12 .p1{margin-left:240px; position:relative;}
Syntax not correct , You need to put . before class name of paragraph tag
.col_12 .p1{margin-left:240px; position:relative;}
________^__________________________________________
for me a <div> won't be allowed inside a <p>.
You may use a <span> instead.
-Sven
this should work more dynamically
.col_12 p:nth-child(2){margin-left:240px; position:relative;}
if you want, you can try with your own class like this
.col_12 p1{margin-left:240px !important; position:relative;}
I have a blog on wordpress and I need to center an object. What is the easiest way?
You cannot do layout with PHP, it is for programming logic. To do layout you use CSS and HTML. To center text you can use the text-align tag that jdhartley showed above. To center a block like a table or div you use the following CSS:
<style>
.centered {width:950px; margin-left:auto; margin-right:auto;}
</style>
<div class="centered">Bunch of stuff to be centered</div>
The width can be anything, but you do have to set it. It can be a percent like 90% or a pixel width.
You would actually use HTML and CSS to do that. :)
<div style="text-align: center;"> YOUR OBJECT HERE </div>
Definitely easiest and the best way to centre whatever you want in WordPress is to use:
<center>whatever you need, a, img etc..</center>
You don't center objects using PHP. You position them using CSS. Read this for further info.
PHP is just a scripting language that performs data manipulation and such. You process that information and output HTML (usually.) Something you can do is just close the PHP and drop some HTML into it like this:
<?php //PHP stuff ?>
<p style="text-align:center;">HTML Stuff</p>
alternatively you can do it all in PHP like:
<?php
$output = '<p style="text-align:center;">HTML Stuff</p>
echo $output;
?>