Topic: CSS Styling (1/1) - OSTraining Support

Welcome, Guest

TOPIC: CSS Styling

CSS Styling 1 year 2 weeks ago #45021

kriss OFFLINE OSTarlet Posts: 43 Karma: 0	Hi, How can I add CSS style to my module boxes - just like this example : demo-joomla-2.5.waltercedric.com/ see the "Forums,WIKI,Contact me,etc...boxes.. I am using rockettheme / gantry Thank you.
	K.K. Please become a member of OSTraining to reply to this post.

CSS Styling 1 year 2 weeks ago #45025

tessa OFFLINE Moderator Posts: 3950 Thank you received: 134 Karma: 9	Hi Kriss, You can navigate to templates/rt_tachyon_j16/css/body.css to change the style of your modules. Also have you read our Gantry tutorial? There might be useful information for you. :-) www.ostraining.com/blog/joomla/gantry/
	Warm Regards, Tessa Mero Follow us on Twitter - twitter.com/OSTraining Like us on Facebook - facebook.com/ostraining Please become a member of OSTraining to reply to this post.

CSS Styling 1 year 2 weeks ago #45033

ScottM73
OFFLINE
OSTar
Posts: 89
Karma: 0

Hi Kriss,
1. Go to demo.rockettheme.com/
2. Choose Tachyon Template Demo - Feb 2011
3. On the 'Features' Tab, (of the Tachyon demo) choose 'Module Variations'.
4. Look above the logo - You will see 6 different styles of modules using the 6 module suffixes included in your Tachyon template, I believe you're looking for the 'box4' style module suffix.
5. To add the styling to your module, go to Extensions-> Module Manager and choose the module you'd like to apply the new style to. Then, on the 'Advanced Settings' Tab, in the field named 'Module Class Suffix' type in 'box4'.
6. Save it, and reload your page in the front-end.

Your Module should now show the styling you require.

- Scott

Please become a member of OSTraining to reply to this post.

CSS Styling 1 year 2 weeks ago #45057

tessa OFFLINE Moderator Posts: 3950 Thank you received: 134 Karma: 9	Hi Scott, Thank you for providing this information as I am not familiar with that framework. Kriss, let us know how it works out. :-)
	Warm Regards, Tessa Mero Follow us on Twitter - twitter.com/OSTraining Like us on Facebook - facebook.com/ostraining Please become a member of OSTraining to reply to this post.

CSS Styling 1 year 2 weeks ago #45127

edandrea
OFFLINE
OSTop Dog
Posts: 3106
Thank you received: 7
Karma: 0

Hi kriss,

Yes you can style them the same. First you'll need to write the css for them. You can use Firebug to track down the specifics on the tachyon template.

Then you can style the module by creating your own module suffix.

www.ostraining.com/blog/joomla/how-to-us...las-module-suffixes/
docs.joomla.org/Using_Class_Suffixes
www.ostraining.com/courses/session/jooml...-bolt/module-stling/

or watch our video
www.ostraining.com/courses/session/jooml...dule-class-suffixes/

Is that what you were looking for? If you can get ahold of the tachyon template itself you may be able to copy the module suffix styles to your template and use them there.

Cheers,
Ed

Please become a member of OSTraining to reply to this post.

CSS Styling 1 year 2 weeks ago #45163

kriss OFFLINE OSTarlet Posts: 43 Karma: 0	Thank you Ed, I would be able to download the Tachyon Theme and I am very interested of experimenting with your very last suggestion """If you can get ahold of the tachyon template itself you may be able to copy the module suffix styles to your template and use them there.""" - would you please lead me step by step how to do so? Thank you.
	K.K. Please become a member of OSTraining to reply to this post.

CSS Styling 1 year 2 weeks ago #45178

edandrea
OFFLINE
OSTop Dog
Posts: 3106
Thank you received: 7
Karma: 0

Their CSS is rather complicated. I haven't tried this but if you copy the section of template.css that is marked as module variations to the bottom of your current template.css it should add all the extension variations. You'll have to change conflicting names, or comment out the current module variations if there are conflicts.

There could be problems if your current template has some of the same class names. In any event, all the styling for the modules is there. Like I said, I haven't tried it. Don't do this on your live site. Make a copy first, and try it there. Be sure you have a backup.

/* Module Variations */
.box1 .rt-block, .box2 .rt-block, .box3 .rt-block, .box4 .rt-block, .box5 .rt-block, .box6 .rt-block, .box7 .rt-block, .box8 .rt-block, .box9 .rt-block, .box10 .rt-block, .noticebox1 .rt-block, .noticebox2 .rt-block, .noticebox3 .rt-block, .noticebox4 .rt-block {border-radius: 5px;}
#rt-header-surround .box5 .rt-block, #rt-footer-surround .box5 .rt-block {border: 0;}
.module-icon {width: 18px;height: 18px;position: absolute;top: -3px;right: -3px;}
.icon1 .module-icon, .icon11 .module-icon {background-position: 0 0;}
.icon2 .module-icon, .icon12 .module-icon {background-position: -22px 0;}
.icon3 .module-icon, .icon13 .module-icon {background-position: 0 -22px;}
.icon4 .module-icon, .icon14 .module-icon {background-position: -22px -22px;}
.icon5 .module-icon {background-position: 0 -44px;}
.icon6 .module-icon {background-position: -22px -44px;}
.icon7 .module-icon {background-position: 0 -66px;}
.icon8 .module-icon {background-position: -22px -66px;}
.icon9 .module-icon {background-position: 0 -88px;}
.icon10 .module-icon {background-position: -22px -88px;}
.title1 .rt-block, .title2 .rt-block, .title3 .rt-block, .title4 .rt-block {position: relative;padding-bottom: 35px;margin-bottom: 15px;}
.title1 .module-title-surround, .title3 .module-title-surround {position: absolute;bottom: -6px;right: 0;height: 29px;}
.title2 .module-title-surround, .title4 .module-title-surround {position: absolute;bottom: -6px;left: 10px;height: 29px;}
.title1 .module-title, .title2 .module-title, .title3 .module-title, .title4 .module-title {height: 29px;margin-left: 10px;}
.title1 .module-title .title, .title2 .module-title .title, .title3 .module-title .title, .title4 .module-title .title {height: 24px;margin-left: -10px;padding: 5px 10px 0 15px;font-size: 130%;line-height: 130%;}
.font-size-is-large .title1 .module-title .title, .font-size-is-large .title2 .module-title .title, .font-size-is-large .title3 .module-title .title, .font-size-is-large .title4 .module-title .title, .font-size-is-xlarge .title1 .module-title .title, .font-size-is-xlarge .title2 .module-title .title, .font-size-is-xlarge .title3 .module-title .title, .font-size-is-xlarge .title4 .module-title .title {line-height: 100%;}
.title5 .module-title {padding-bottom: 10px;margin-bottom: 5px;}
.noticebox1 a, .noticebox2 a, .noticebox3 a, .noticebox4 a {color: inherit;}
.noticebox1 .module-icon {background-position: -22px -22px;}
.noticebox2 .module-icon {background-position: 0 -22px;}
.noticebox3 .module-icon {background-position: -22px 0;}
.noticebox4 .module-icon {background-position: 0 0;}

/* Module Standard Variations */
.promo .module-title .title {font-size: 190%;}
.promo .module-content p {font-size: 140%;line-height: 140%;margin-bottom: 0;}
.standardcase .module-title .title {text-transform: inherit;}
.lowercase .module-title .title {text-transform: lowercase;}
.uppercase .module-title .title {text-transform: uppercase;}
.flush .rt-block {padding: 0;}
.flushtop .rt-block {padding-top: 0;}
.flushbottom .rt-block {padding-bottom: 0;}
#rt-popup, #rt-popuplogin {display: none;}

Please become a member of OSTraining to reply to this post.

CSS Styling 1 year 2 weeks ago #45562

kriss OFFLINE OSTarlet Posts: 43 Karma: 0	Thank you Ed.
	K.K. Please become a member of OSTraining to reply to this post.

CSS Styling 1 year 2 weeks ago #45565

edandrea OFFLINE OSTop Dog Posts: 3106 Thank you received: 7 Karma: 0	You are most welcome! Cheers, Ed
	Please become a member of OSTraining to reply to this post.