Links CSS question

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
1/5/2009 7:00:34 AM
Gravatar
Total Posts 118

Links CSS question

Is there an equivelant of rsswrapper for the links module. I would like to put the links inside a shaded box

 

Neil

1/5/2009 7:05:29 AM
Gravatar
Total Posts 18439

Re: Links CSS question

If you view the source of the rendered page you can see what css classes are available in the page. Every feature has some wrapper class. If you understand CSS selectors, you can select and style anything you want.

Hope it helps,


Joe

1/5/2009 7:31:32 AM
Gravatar
Total Posts 118

Re: Links CSS question

Unless I am misunderstanding things - the RSS module and Links modules have the selectors in different places 

This is from the RSS module

<h2 class="moduletitle">News <a class="ModuleEditLink"></a></h2>
<div id="ctl01_rightContent_ctl00_updPnlRSSA">
<div id="ctl01_rightContent_ctl00_pnlWrapper" class="panelwrapper rssfeedmodule">
 <div class="modulecontent rsswrapper">
 <div id="ctl01_rightContent_ctl00_divFeedEntries">
 <div id="ctl01_rightContent_ctl00_rptEntries_ctl00_divFeedEntry" class="rssfeedentryTrue">
<div class="rsstitle">

Following the Module Title you can use the combination of "panelwrapper rssfeedmodule" or "modulecontent rsswrapper" to style the actual module content.

This is from the links module

<div id="ctl01_rightContent_ctl00_pnlWrapper" class="panelwrapper linksmodule">
<h2 class="moduletitle">BHPC Races <a class="ModuleEditLink"></a></h2>
<div id="ctl01_rightContent_ctl00_pnlLinks" class="modulecontent">
<ul class="linkitem"><li class="linkitem">
<a href='http://dev.bhpc.org.uk/rules-and-classes.aspx' title='Rules and Classes' >Rules and Classes</a>

On this one the combination "panelwrapper linksmodule" is before the Module Title which I assume is correct ( making the RSSmodule one in the wrong place ) but linksmodule is missing from the ctl01_rightContent_ctl00_pnlLinks id (which I assume should be there)

 

Regards

 

Neil

 

 

1/5/2009 7:43:38 AM
Gravatar
Total Posts 18439

Re: Links CSS question

There is some truth in your observation, there are general patterns similar across features but no absolute rules about css class structure. All features provide enough hooks that if you understand CSS selectors you can style it any way you wish. Don't think in terms of what you may perceive as missing as compared to another feature, think in terms of what is there that you can use to form a selector. If you read the linked article you can get past thinking just in terms of class names and learn to create more complex selectors you will be able to style things as you wish.

For example if you want to style something in the links module that lives in the div that has the class modulecontent, you don't want to just use the .modulecontent as that would affect other features. Instead be more specific with

.linksmodule .modulecontent {}

which would only apply to .modulecontent that is inside a .linksmodule.

I am making a change to my copy of the feed module to make it more consistent by putting the moduletitle inside the panelwrapper.

Hope it helps,

Joe

1/5/2009 8:10:02 AM
Gravatar
Total Posts 118

Re: Links CSS question

Thanks Joe. I hear what you are saying and see how I can use it to do what I need, but I think this inconsistantancy makes thinks more difficult than it needs to be.

 

Regards

 

Neil

1/5/2009 8:47:53 AM
Gravatar
Total Posts 18439

Re: Links CSS question

That's why I said:

I am making a change to my copy of the feed module to make it more consistent by putting the moduletitle inside the panelwrapper.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.