I'm new for WordPress. I'm using the_content() to get image and posted text. I need to change the CSS in Text of post.
Html coding is,
<div class="entry-content">
<p>
<a href="http://.../?attachment_id=34#main" rel="attachment wp-att-34">
<img src="http://.../uploads/2013/03/1-1.jpg" alt="1-1" width="960" height="283" class="alignnone size-full wp-image-34">
</a>
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adnenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt Cras dapibus.
</p>
</div>
What to do?
This could be done in several ways
When you create a new post, add some html element to the text and assign the a class to it and style that class in your style.css
Use inline style.
Or simply just put new rule in css file
.entry-content p{
// your style here
}
Related
I have a long paragraph of text which I'd like to flow around an image which is floated left. Instead it seems there's a paragraph break inserted where I put the image, and the new paragraph starts next to the image. What's odd is that this doesn't happen when I insert a second image further down.
How can I keep my paragraph together and flow properly around the image + caption?
HTML:
[...] Integer rutrum at libero ut auctor. Integer sem tellus, imperdiet
non dignissim ut, laoreet sit amet nunc.
<figure class="figureleft">
<img src="i/dodecahedron.jpg" width="300" height="300" alt="" />
<figcaption>
Artwork by Igne Mikalauskaite
</figcaption>
</figure>
Nunc dolor ex, malesuada ac lobortis eget, commodo laoreet est. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices sapien nunc,
sit amet euismod turpis elementum eu. [text continues]
CSS:
body {
font-family: Verdana, Geneva, sans-serif;
}
#maincol {
width:800px;
background-color:#91C1CC;
padding:1em;
}
.figureleft, .figureright {
background-color:white;
padding:5px;
border:1px solid black;
}
.figureleft {
float:left;
margin:15px 20px 15px 0;
}
figcaption {
font-style:italic;
font-size:0.85em;
}
JSfiddle at https://jsfiddle.net/stevenvh/k3tnwyfs/2/
Edit
Tonielton pointed out that I can't use block elements like figure inside a paragraph, but when I want an image with a caption I'm bound to use a block element of some sort, I guess.
I think I found it. Tonielton's suggestion of breaking the paragraph before the figure, and restarting a new one after is not the solution, since the new paragraph doesn't follow on the same line as where the previous ended.
Solution: do break the paragraph, but add
<p style="display:inline;">
to both the one before and the one after the <figure> block.
See https://jsfiddle.net/stevenvh/k3tnwyfs/4/
Firstly, look this fiddle: http://jsfiddle.net/Uuyp8/5/
I need to create block like block in next image in the <aside> block.
Don't pay attention to russian words. It's not the question.
I can create such block with next html structure:
<aside>
<div class='block'>
<div class='header'><h1>Lorem block 2</h1></div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper posuere pretium. Mauris vitae pharetra nisl.
</p>
</div>
</div>
<div class='block'>
<div class='header'><h1>Lorem block 1</h1></div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper posuere pretium. Mauris vitae pharetra nisl.
</p>
</div>
</div>
</aside>
Questions:
1) is it ok to use new html5 tags like <aside> or <section> with <div> blocks like in my example?
2) how I can create such block only with html5 tags?
3) Do I need to use only html5 tags or it is normal practic to use both html5 tags and old divs?
Divs aren't "old". They still have theire place like <span> and many others.
See here
QUOTE :
“Sorry, can you say that again?”, I hear you ask. Certainly: you can still use <div>! Despite HTML5 bringing us new elements like <article>, <section>, and <aside>, the <div> element still has its place. Let the HTML5 Doctor tell you why.
So you don't have to ban them from your web pages and you should still use them like you are.
Hey, y'all! I am building a site using the Nivo Slider (which I've normally had great success with). But I'm having some issues with this particular usage that I just can't figure out. Any help from you code wizards would be greatly appreciated!
Test site is here.
In Firefox, as usual, the site looks fantastic. Everything works, nothing broken.
In Opera, pretty much the same.
In IE9, however, the slider looks great until it transitions to the next image. The slider uses a float:right property and, in Explorer, each transition causes the image to momentarily jump all the way to the left of the container div. THIS PROBLEM SOLVED. The "float:right" property was only placed on the slider images and not to the slider container, itself. The corrected code now causes both the individual images AND the overall slider container to float to the right.
In Safari, the slider looks great unless you resize the page to anything less than 100% - then, the images do not shrink with the surrounding content.
In Chrome, surprisingly, the thing is all messed up. On first load, the slider doesn't appear. If I reduce the viewing size to 90%, it appears fine including when I size back up to 100%. However, the caption function is not popping out as far as it does on the other browsers (see the site to understand what I mean). THIS PROBLEM SOLVED It turns out that the bullets that control the slides were the problem. Or, more accurately, the div surrounding them was. The div for the .controlNav bullets had a "position:absolute" property that worked fine in all the other browsers but that screwed up Chrome for whatever reason. I eliminated those bullets entirely as they're really not necessary for this particular site. Problem solved. Unfortunately, the methods used have buggered up Safari rendering of the slider completely, so now I have to figure that out.
I have done quite a bit of searching on this topic and have found many problems with the Nivo Slider, particularly in IE, but nothing that exactly relates to what I am experiencing. I suspect that some of the issue is being caused by the float:right property that the Slider typically doesn't get used with (most sites use it in a centered-on-page capacity), but I don't know this for absolute certain.
Here is the slider HTML (there is a metric buttload of CSS for the Nivo Slider so I won't paste it here. You can look at the stylesheets using your browser's developer tools.) :
<div id="header">
<div class="layout-wrapper">
<aside id="slider" class="theme-default">
<div id="nivo-slider" class="nivoSlider slider-underline">
<img src="images/slider-img1.jpg" class="attachment-slider_nivo" title="#slide-1" />
<img src="images/slider-img2.jpg" class="attachment-slider_nivo" title="#slide-2" />
<img src="images/slider-img3.jpg" class="attachment-slider_nivo" title="#slide-3" />
</div>
<!-- end #nivo-slider -->
<div id="slide-1" class="nivo-html-caption" data-position="right">
<span class="slider_title">Tile and Ceramic Cleaning</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
Read more »
</div>
<!-- end #slide-1 -->
<div id="slide-2" class="nivo-html-caption" data-position="left">
<span class="slider_title">Kitchen Cleaning and Sanitizing</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
</div>
<!-- end #slide-2 -->
<div id="slide-3" class="nivo-html-caption" data-position="right">
<span class="slider_title">Full Residential Services!</span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc suscipit. Suspendisse enim arcu, convallis non, cursus sed, dignissim et, est. Aenean semper aliquet libero.</p>
</div>
<!-- end #slide-3 -->
</aside>
<div class="banner-1"></div>
<!-- end #slider -->
</div>
<!-- end .layout-wrapper -->
</div>
<!-- end #header -->
<div class="clear"></div>
I appreciate any and all tips you folks can come up with!
Replace the <aside> tag with a <div> tag. I did that in the chrome inspector tools, and it seemed to work fine after that.
I am using the nivo-slider on 4-5 different websites right now, never seen it use the <aside> tag.
Ok, I am new with CSS and this is just causing me trouble. How do I add a background color to multiple columns but not all columns.
I want one background color on span2 and a different color on span10. The problem I run into is issues with padding. When I apply the background to certain columns it won't have a nice even padding around the content. Does this make sense? How do I add a background to certain columns with nested columns and still maintain nice even padding?
HTML
<div class="row bg">
<div class="span10">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="sidebar">
<div class="hero-unit">
<h1>Join</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Register Now »</a></p>
</div>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span5">
<div class="bot-pad">
<h2>We are Fun!</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<div class="span5">
<div class="right-pad bot-pad">
<h2>Learn more about yourself</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
</div>
</div>
</div>
CSS
.bg
{
background: url('/assets/img/grid.png');
.border-radius(5px); //LESS mixin for creating border radius
}
.right-pad
{
padding-right: 20px;
}
.bot-pad
{
padding-bottom: 20px;
}
Explanation
So the bg class is applying the background. Then my nested columns have weird padding, so I went through and added classes like right-pad to the columns that need right padding and bot-pad to columns that need padding on the bottom. I know how incredibly wrong this is semantically, I just don't know how else to get my needed results. Thanks.
Here is another example of what I am trying to do... however they do not provide a solution either
https://github.com/twitter/bootstrap/issues/1446
It's not a good idea setting the background-color on the span# level. Why? Because span# is a positioning helper and if you change paddings or margins the entire grid will break.
So, what's the native Twitter Bootstrap element for rendering a coloured background wrapper? It's well.
How to use it?
First, insert the well element inside the span#:
<div class="span5">
<div class="well well-red">
<!-- Your content -->
</div>
</div>
And second, assign properties through an extension of the .well class (I've used .well-red):
.well-red {
background-color: #ff0000;
}
This way you have always available the parent class .well but you can apply different properties at will.
I have the following jquery mobile code:
<div data-role="collapsible">
<h3>I like to read a lot but sometimes I simply can't bring myself to do it</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis interdum felis, et tempor nunc commodo sit amet. Ut fringilla.
</p></div>
I need the h3 tag to word wrap as opposed to truncating as jquery mobile does by default.
I've tried changing the above h3 tag to:
<h3 style="white-space:normal;">
or adding the following to the style sheet
h3 { white-space:normal; }
or
.h3 { white-space:normal; }
None of which works...any ideas? I could wrap it with line breaks but that's no good as it looks ugly if someone changes the orientation of their phone.
Thanks
Darren
You had the right idea. JQM just does some funky markup and you were targeting the wrong thing in the end.
.ui-collapsible h3 .ui-btn-text{white-space:normal;}