I have a PHP script that pulls an RSS feed. The script pulls the article and sets it as a variable:
$page .= "<br><span class='rssdesc'>$description</span>";
I can change the size of images in an article with the following CSS:
.rssdesc img {
width: 50px;
height: 50px;
}
This works fine. However I cannot seem to style the text of the article. I assumed this would be accomplished like this:
.rssdesc {
font-size:9px;
color: #0094DE;
}
But for some reason it doesn’t work. I have tried using !important and .rssdesc font
but still nothing. Any ideas would be greatly appreciated.
Update I can also style links in an article using the following:
.rssdesc a:link {
color: #0094DE;
font-size:9px;
text-decoration: none;
It turns out that the tables in the RSS feed was responsible setting the font properties. I was able to override this in the CSS using the following:
.rssdesc table td {
color: #c02537;
font-size:9px;
}
Related
I'm currently building a site using WordPress. I'm trying to layout a listview for the products page with CSS but I am experiencing a couple of problems. The code behind these elements are within the WordPress files so I'd rather not touch those if possible.
What I'm trying to do is move "MSDS" next to the title as it was below the title before. I've set it to relative position and moved it using top and right pixel values.
Example 1
Example 2
My first problem is that if you look at Example 1. I have positioned "MSDS" next to that specific title but when you look at Example 2, it has a shorter product name but the positioning of "MSDS" is the same therefore it looks silly. How do I go about fixing this?
My second problem may be fixed if the first is fixed but on a maximised window, the layout looks fine but when resized to a smaller window then the window covers "MSDS" but the title looks fine as it wraps so it's viewable on the page.
I'm not entirely sure where to look or what specific things I should be looking for to find a fix for this. So any help would be much appreciated. The code below is what I used to reposition the "MSDS"
.product-list .product-thumb .description {
position: relative;
bottom: 26px;
left: 290px;
width: 30px;
}
You can always use :after for these things
These should help.
Add these in your stylesheet to
.product-list .product-thumb .description:after {
position: absolute;
content: "MSDS";
color: blue;
}
You can style the element accordingly then
you are looking for position: relative and position: absolute i think.
Try this: https://jsfiddle.net/r5rnyh3y/1/
.title {
display: inline-block;
position: relative;
}
.title a {
position:absolute;
right: -100%;
margin-right: -10px;
display: inline-block;
width: 100%;
}
I'm attempting to build a draft version of a website for the police service of a small nation using WordPress and the Webfolio Theme by Site5.com.
I've encountered a problem whereby if I select to use an image for the background of the theme using the theme's customization options/WordPress options, the black header that is repeated at the top at either side of the header does not display.
Now when I add the background image it looks like this
I tried reading the Site5 documentation but it doesn't have information that helps. Their support forums also seem quite inactive which is why I decided to ask here.
I've had a look at the CSS file and found the following:
* { margin: 0; padding: 0; }
body,html {
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#333;
background:#EFEFEF url(library/images/bk_body.jpg) repeat-x;
}
When I add the background image the CSS is still the same so I'm not sure how WordPress themes implement optional background images. I've attempted to fiddle with it to no success, but my knowledge of CSS is limited.
My question is, is it possible to use the background image while maintaining the top header bars as in the demo site? If so, could anyone guide me on the way how?
Edit: I've also tried using the built in Background Image options but all of them have the same result.
The black bar is actually a background image applied to the body. You coud use multiple backgrounds to get the effect you're after:
body, html {
background-image: url(library/images/bk_body.jpg), url(your_image.jpg);
background-repeat: repeat-x, no-repeat;
}
I think that your problem is the background-image in header
header {
background: url(library/images/bk_header.jpg) 100% 0 no-repeat;
/*other css rules*/
}
that refer to style.css row 153
remove that image with a transparent background or something that you want.
e.g. background-color: transparent;
Please remove header image from style.css
header {
background: url("library/images/bk_header.jpg") no-repeat scroll 100% 0 rgba(0, 0, 0, 0);
height: 195px;
padding: 0 8px;
position: relative;
z-index: 99;
}
remove background from header
header {
height: 195px;
padding: 0 8px;
position: relative;
z-index: 99;
}
I am working with the site cardinalmma.com/ but you can see that the menu is not centered. For example see the news menu its in the left portion but with some padding. I want it to be centered can anyone help me.
thanks
Somdeb
You want the individual navbar labels centered, correct?
li.menu-item {
text-align: center;
}
This targets the <li> tags in your menu, identified by the .menu-item class. The text-align: center; rule takes care of centering the <a> tag with your text in it.
In my browser, this modification makes it look like this:
Try something in your css stylesheet to make the menu items be align center.
try something with the class menu and the li part:
.menu {
text-align: center;
}
Or something in that direction
Please update your css. This should resolve your issue.
.menu_top a {
color: #eee;
font-weight: bold;
line-height: 3.4em;
padding: 0 14px;
text-decoration: none;
height: 50px !important;
text-align: center;
display: block;
}
.menu_top ul ul li a {
text-align:left;
}
To center the navbar labels use this css courtesy of Surreal Dreams:
li.menu-item {
text-align: center;
}
Now to elaborate on how to find this solution. The best way to edit/develop CSS for wordpress is to use firebug or Chrome's developer tools to find the element you want to modify.Then you can add CSS right there and see the results real-time (these changes are not permanent). I would say it is likely this is how Surreal Dreams found the solution.
If you want to learn more about using the Chrome dev tools tool go to this page: https://developers.google.com/chrome-developer-tools/.
If you are new to CSS (I dont know if you are new to CSS or if youre problem is strictly editing CSS) for wordpress you should go check out http://www.codecademy.com/tracks/web
Im a beginner when it comes to building a site. Thats why i choosed to build with Wordpress.
The thing is that i got i responsive theme that should work with any browser.
I upload a logo by going to appearance>Customize>upload logo.
With Crome it looks great:
But with firefox, Iphone safari and IE it looks bad:
http://imagizer.imageshack.us/v2/800x600q90/838/8tl2.png
I've a Childtheme, and the only code i've put in is to get the logo to display a bit more towards the middle:
#import url("../realia/style.css");
.logo-wrapper { position: relative; left: 10%; }
Why is it looking like this, ive tried with .clearfix codes and to change the image height etc.
Have a great day and thank you in advance!
Just remove the height from your,
.logo class
Height is causing issue on Chrome as well, while resizing the window. Image is not able to resize. So, remove the height in px.
Good luck!
I have just checked your theme out, and noticed this class:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
float: left;
height: 90px;
line-height: 90px;
margin: 0;
}
Remove the height: 90px and it should look good in all browsers!
Remove float: left from the logo.
e.g:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
height: 90px;
line-height: 90px;
margin: 0;
}
I have recently faced this issue when my logo was not showing up properly in internet explorer, try with this code hope this will work.
max-height: 100% !important;
Im trying to implement a more accurate h tag structure on my opencart site for seo purposes. For those that are unfamiliar with the html in opencart, most pages are split with php calls being made to seperate header, main body and footer files. I want to have a h1 tag that is slightly different on the main page to the product page by writing internal css to change the font size to something slightly smaller.
I therefore added the code (below) to the top of the products page which seems to work but leaves a massive white space at the bottom of the page below the footer. Example at this link: http://www.imbued.co.uk/sleep/aborro-bed
How do i implement this using css correctly?
<style>
h1 {
font-size:2em !important;
margin:0 0 20px !important
}
</style>
Try this:
"h1" on main page:
#content-home h1 {
font-size: 2em;
color: red;
}
"h1" on product page:
.product-info h1 {
font-size: 1em;
color: green;
}