modules margins and panes

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.
11/15/2010 1:52:53 AM
Gravatar
Total Posts 3

modules margins and panes

Hi there,

  I am having a hard time finding the configuration options (CSS) to minimize the margins between modules on a pane

  We use a 3 column layout (http://www.acro2gym.be)

  There are a few thing I wanted to know :

  - how can I minimize the top and bottom margins of a module

  - how can I get rid ore change the title

  - is there a list of classes and there functions (The side is generated from artisteer).

 

Greetz

Ludo

11/15/2010 4:16:04 AM
Gravatar
Total Posts 70

Re: modules margins and panes

Hi Ludo,

The way which I use for myself is to search in the page sources. I.E. for default styleshout-refresh skin you will have something like this at the "view page sources" window in browser:

<div id="ctl01_mainContent_ctl00_pnlWrapper" class="art-Post-inner panelwrapper htmlmodule"
<a id='module0' class='moduleanchor'></a><h2 class="art-PostHeader moduletitle">Welcome <a class="ModuleEditLink"></a></h2>
<div class=" modulecontent">
<div id="ctl01_mainContent_ctl00_divContent" class="slidecontainer">
<p> Welcome to <strong>mojoPortal</strong>, this is sample data, you can edit this content to get started.<br /> <br /> ...

After that you should find the directory with skin sources for your site, something like this: /Data/Sites/[new site id]/skins/styleshout-refresh

and after some dig you may found what, for example, the h2.moduletitle class is located at style.css file and there is some padding and marging there. Just try to change some values and look at the result ( do not forget to clear the browser caches and "touch" the web.config ) and you will see - is the changes was correct or you've been missed and some another class needs to be adjusted.

FYI: Please, do not forget what the artisteer classes might be rewritten in the style-artisteer-overrides.css as well as the style-ie6.css and style-ie7.css are present and they are the styles for ie-oriented staff.

Hope it helps,

BTW: The nice site about the sport!

Best regards, Igor

 

11/15/2010 9:02:55 AM
Gravatar
Total Posts 2239

Re: modules margins and panes

Hi,

Igor is correct, the best way to learn mojoPortal CSS classes is to study the page source in your browser. I, and many others, use FireBug for this because it makes viewing the markup and CSS rules a lot easier.

I took a quick look at your site and as far as the padding and margins go for the modules, there is a 5px margin on the art-Post class and a 10px padding on the art-Post-body class. What this does is put a total of 30px between the modules. If you set the margins and paddings to only be on the top and not the bottom, you would drop the space from 30px to 15px between the modules.

HTH,
Joe D.

11/16/2010 12:40:11 AM
Gravatar
Total Posts 3

Re: modules margins and panes

Many many thanks, Igor and Joe,

  adjusted the paddings and margins, and now the wife is perfectly happy with the way it looks.

  Before I have been experimenting with a lot of CCS classes, but did not find the right ones.

  Now I am a bit more wiser how the classes are structured

Greetings

Ludo

12/10/2010 10:26:12 AM
Gravatar
Total Posts 36

Re: modules margins and panes

HTML MODULE Question

 

If i need to insert a HTML module in a page, but i will need this module to take an entire space from  left to right. Which Module should i use?

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