Creating a module variation
-
-
- GoG
- Rocketeer
- Posts: 91
- Thanks: 1
-
I am trying to create a simple clean template starting with the default grantry template.
So far I have made all the backgrounds white, created a grey menu bar with a nice gradient and colour changes on hover/active.
Now I want to create module variations. They are quite simple. Solid colour, rounded corner rectangles like the red one attached to this message.
Could anyone offer some pointers as to how to do those? I have edited a lot of CSS in the past, but coming up with CSS from scratch to join the different bits of graphics so that the boxes can later change size is a bit daunting at the moment. I'm not sure where to put each bit of CSS either or how to do it so that you can later use module suffixes to use each module variation.
If someone could get me started with an example or some pointers I'd be really grateful.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Sorry but by adding a new post 2 hours after your 1st post, you took yourself out of the Mod's queue so we didn't see this yet. When we see posts in a thread we are under the impression that you already received help.
Also please check this ...
www.rockettheme.com/forum/index.php?f=33...36997&rb_v=viewtopic
1. step is to give a link se we know what you are talking about.
-
-
-
- GoG
- Rocketeer
- Posts: 91
- Thanks: 1
-
Ah, sorry. Will edit my posts rather than reply to them in the future.
I keep encountering this issue every time I ask for help here. I develop sites locally not on the internet. In any case, I fail to see how seeing my installation of the default gantry template with a couple of little changes would help.
My main question (forget the other two, I got round them) is a general one not specific to the particular site I am trying to do this on at the minute. Its basically,
1. how do you create module variations starting with the default gantry template?
2. how would you go about recreating a module variation that looks like the graphic I posted above? (My other variations would them be the same but in different colours)
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Just some basic pointers.
There are two main ingredients for mod-suffixes.
The html that is used in the modChrome. Think of it what directly surrounds the module you publish. You can check the modules.php in the html folder of your template for that.
this is the "standard"-modChrome:
function modChrome_standard($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<?php if ($params->get('moduleclass_sfx')!='') : ?>
<div class="<?php echo $params->get('moduleclass_sfx'); ?>">
<?php endif; ?>
<div class="rt-block">
<?php if ($module->showtitle != 0) : ?>
<div class="module-title">
<h2 class="title"><?php echo $module->title; ?></h2>
</div>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
<?php if ($params->get('moduleclass_sfx')!='') : ?>
</div>
<?php endif; ?>
<?php endif;
}
The modChrome is set via this piece of code in index.php
<?php echo $gantry->displayModules('top','standard','standard'); ?>
The 2nd "standard" is the one that sets the chrome.
Now you can see that the chrome is much simpler as it is in the club-releases.
In the club releases we also have divs like <div class="module-surround">
that can be used for styling.
In the modChrome
<div class="<?php echo $params->get('moduleclass_sfx'); ?>">
is pulling the mod-suffix.
So checking the code you see there is .rt-block in that code-block.
We can use that now. (if you really want to get into I would add an element just for the mod-suffix.)
Just to give an example:
Here is the code for three mod-suffixes.
One that adds rounded corners and two add background colors ...
div.suffix-1 div.rt-block {
background-color: maroon;
color: white;
}
div.rounded div.rt-block {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
div.suffix-2 div.rt-block {
background-color: red;
color: white;
}
they can be used as a mod-suffix in a combination like this:
"suffix-2 rounded"
I hope this helps. Of course it's just the beginning. Check out the latest templates to see what other cool things you can do. The suffix can also be used as a toggle to inject html-elemnts to the module chrome for icons, badges etc ...
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
GoG wrote:
Also, why won't adding a line to style1.css like this;
#rt-content-top-a {background-color: #eeeeee;}
change the background of that module position?
because there is no
<div id="rt-content-top-a">...</div> in the code.
If it doesn't exist you can't style it.
When you create mod-suffixes you have to look into the generated html-structure wich gives you the hooks to style ...
-
Time to create page: 0.058 seconds