[css-d] How to control width via CSS
Anyone know the best way to change or control the width of a frame via CSS?
I'm trying to modify the default look of the WordPress Rotating Post plugin
but can't seem to increase or decrease the width of the frame. I can modify
height via the highlighted options below but can't seem to decrease the size
of the width which is currently wider than my posts, almost 625px wide.
div#rp_frame
{
margin: 25px 0 0 0;
padding: 3px;
border: solid 1px #373737;
}
div.rp_post
{
}
div.rp_post h2
{
margin: 0;
}
div.rp_post_title
{
}
div.rp_post_time_author
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
color: #777;
margin: 0 0 5px 0;
}
div.rp_post_content
{
height: 125px;
margin: 0;
padding: 0;
overflow: hidden;
I've tried using a div statement with the statement below but it didn't
work:
I figure I'm missing something obvious so any responses are appreciated.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
I'm not familiar with the rotating post plugin, does it use frames? If not, WordPress doesn't use frames. It uses PHP to dynamically create pages. Also, it looks like you're using the default theme since you have . Narrowcolumn is an element in the default theme's stylesheet, so you may get your desired result from changing the width there. Dashboard->Appearance->Editor->style.css __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
I caught on to that after sending the email. The plugin author was using the
Kubrik theme as an example tis why it didn't work on my theme.
I don't think it uses frames and the author provided a stylesheet to modify,
I just can't seem to make this basic changes to get this to fit in with my
theme. I've left a message but have yet
CSS Stylesheet:
div#rp_frame
{
margin: 30px 0 0 0;
padding: 5px;
border: solid 1px #000;
}
div.rp_post
{
}
div.rp_post h2
{
margin: 0;
}
div.rp_post_title
{
}
div.rp_post_time_author
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
color: #777;
margin: 0 0 5px 0;
}
div.rp_post_content
{
height: 125px;
margin: 0;
padding: 0;
overflow: hidden;
}
div.rp_post_content p
{
padding: 0 0 10px 0;
margin: 0;
line-height: normal;
}
div.rp_post p.rp_post_metadata
{
color: #777;
margin: 0;
padding: 0;
}
div#rp_nav
{
margin: 10px 0 0 0;
padding: 0 0 3px 0;
}
div#rp_nav a
{
cursor: pointer;
text-decoration: none;
}
div#rp_nav #rp_nav_arrows
{
padding: 0 15px 0 0;
}
div#rp_nav #rp_nav_arrows a.rp_nav_button:hover
{
/*color: #b85b5a;*/
}
div#rp_nav #rp_nav_arrows a#rp_nav_left
{
}
div#rp_nav #rp_nav_arrows a#rp_nav_pause
{
}
div#rp_nav #rp_nav_arrows img
{
}
div#rp_nav #rp_nav_arrows span.rp_nav_arrow_text
{
padding: 2px 5px 2px 5px;
border: solid 1px #000;
}
div#rp_nav #rp_nav_arrows span.rp_nav_arrow_text:hover
{
background-color: #b85b5a;
}
div#rp_nav #rp_nav_arrows a#rp_nav_pause img#rp_nav_pause_normal
{
}
div#rp_nav #rp_nav_arrows a#rp_nav_pause img#rp_nav_pause_pressed
{
}
div#rp_nav #rp_nav_arrows a#rp_nav_pause span#rp_nav_pause_normal
{
}
div#rp_nav #rp_nav_arrows a#rp_nav_pause span#rp_nav_pause_pressed
{
/*color: #b85b5a;*/
background-color: #ddd;
}
div#rp_nav #rp_nav_arrows a#rp_nav_right
{
}
div#rp_nav #rp_nav_thumbnails
{
}
div#rp_nav #rp_nav_thumbnails a.rp_nav_thumbnail
{
}
div#rp_nav #rp_nav_thumbnails img
{
margin: 0 5px 0 0;
border: solid 1px #000;
}
div#rp_nav #rp_nav_thumbnails img.rp_nav_thumbnail_on
{
}
div#rp_nav #rp_nav_thumbnails img.rp_nav_thumbnail_off
{
opacity: 0.2;
filter: alpha(opacity=20);
}
div#rp_nav #rp_nav_thumbnails img.rp_nav_thumbnail_off:hover
{
opacity: 0.5;
filter: alpha(opacity=50);
}
div#rp_nav #rp_nav_thumbnails span.rp_nav_thumbnail_on
{
padding: 2px 5px 2px 5px;
border: solid 1px #000;
background-color: #ddd;
}
div#rp_nav #rp_nav_thumbnails span.rp_nav_thumbnail_on:hover
{
background-color: #b85b5a;
}
div#rp_nav #rp_nav_thumbnails span.rp_nav_thumbnail_off
{
padding: 2px 5px 2px 5px;
border: solid 1px #000;
}
div#rp_nav #rp_nav_thumbnails span.rp_nav_thumbnail_off:hover
{
background-color: #b85b5a;
}
On Wed, Feb 10, 2010 at 9:30 AM, Troy Harshman wrote:
> I'm not familiar with the rotating post plugin, does it use frames? If
> not, WordPress doesn't use frames. It uses PHP to dynamically create
> pages. Also, it looks like you're using the default theme since you
> have . Narrowcolumn is an
> element in the default theme's stylesheet, so you may get your desired
> result from changing the width there.
> Dashboard->Appearance->Editor->style.css
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
MarvinC wrote: > I caught on to that after sending the email. The plugin author was using the > Kubrik theme as an example tis why it didn't work on my theme. > I don't think it uses frames and the author provided a stylesheet to modify, > I just can't seem to make this basic changes to get this to fit in with my > theme. Put your page on a public server and provide a clickable link to it in your post. ~d __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
The best way to tackle this would be to view the source for the page from your browser. Note all of the elements involved in the trouble area and go through your styles and see what's going on with each of them. Keep in mind that WordPress also dynamically assigns classes as well, so you'll want to look at those. There are quite a few pieces involved in a WP theme, so you're going to have to work your way through them. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
http://www.nusolutions.biz/demos/dg/gfa/ The top system is the one I'm trying to customize. Basically what I'm trying to do is decrease the width to match that of my other two boxes and add a "heading?" for the title and a different one for the buttons. So the title heading may be a red background and a black background for the buttons. @Troy: Looking through the page source and adjusted the border. Thanks On Wed, Feb 10, 2010 at 10:23 AM, David Laakso wrote: > MarvinC wrote: > >> I caught on to that after sending the email. The plugin author was using >> the >> Kubrik theme as an example tis why it didn't work on my theme. >> I don't think it uses frames and the author provided a stylesheet to >> modify, >> I just can't seem to make this basic changes to get this to fit in with my >> theme. >> > > Put your page on a public server and provide a clickable link to it in your > post. > > ~d > __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
> what I'm trying to do is decrease the width to match that of my other two
> boxes
You're not setting a width anywhere. If you want to make the container the
same width as the others, you need to either specify a width or margins on
#rp_frame.
But also, you have 4 boxes in the column on that page, and none of them are the
same size as any of the others. So I'm not entirely sure what you want this to
be the same size as.
#rp_frame {
margin: 25px auto 0;
width: 400px;
}
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How to control width via CSS
On 2/10/10 8:09 AM, MarvinC wrote: > http://www.nusolutions.biz/demos/dg/gfa/ > > The top system is the one I'm trying to customize. Basically what I'm > trying to do is decrease the width to match that of my other two > boxes and add a "heading?" for the title and a different one for the > buttons. So the title heading may be a red background and a black > background for the buttons. > Are you actively working on tha page, Marvin? Here's what I am seeing in Safari 4 (Mac) this end. It messes up even more on larger text sizes: http://www.hucklesby.com/temp/demos-dg-gfa.png Validator reports 10 XHTML errors as well... Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
