JoomlArt Forums 32,862 posts

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#200357

site: http://bmwqc2.dev.dnsnetworks.ca/joomla/

How would I be able to make my modules look like they do in this site: http://bmwccottawa.org/

Title in a bubble and the module wrapped in a square-like shape?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#545241

For starters, here is the CSS relative to the headers for the modules on the bmwccottawa page:


.box-wrapper h3 {
background: url("../images/bgi/small-title-bg.png") no-repeat scroll left top rgba(0, 0, 0, 0);
color: #6d6d6d
font: bold 12px Arial,Helvetica,sans-serif;
height: 20px;
padding: 8px 0 8px 14px;
text-shadow: 1px 1px 1px #e8e8e8
text-transform: uppercase;
width: 191px;
}

So, if you want something similar, you would first need to upload a similar header background image (i.e. small-title-bg.png) to your images folder. There are all kinds of free resources for backgrounds like this all over the web.

You can then identify such for the background for YOUR module headers.

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#545250

Okay I saved the image… however now I’m thinking that this may not work since the image is a specific width and my bmwqc2.dev.dnsnetworks.ca site has an auto width of 100%? Therefore shouldn’t I be styling via css? If I’m totally off here, can you step me through it?

Can we make squares around EVERY module like the login module on the front page?

<em>@TomC 440383 wrote:</em><blockquote>For starters, here is the CSS relative to the headers for the modules on the bmwccottawa page:


.box-wrapper h3 {
background: url("../images/bgi/small-title-bg.png") no-repeat scroll left top rgba(0, 0, 0, 0);
color: #6d6d6d
font: bold 12px Arial,Helvetica,sans-serif;
height: 20px;
padding: 8px 0 8px 14px;
text-shadow: 1px 1px 1px #e8e8e8
text-transform: uppercase;
width: 191px;
}

So, if you want something similar, you would first need to upload a similar header background image (i.e. small-title-bg.png) to your images folder. There are all kinds of free resources for backgrounds like this all over the web.

You can then identify such for the background for YOUR module headers.</blockquote>

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#545450

<em>@sebbs 440395 wrote:</em><blockquote>Okay I saved the image… however now I’m thinking that this may not work since the image is a specific width and my bmwqc2.dev.dnsnetworks.ca site has an auto width of 100%? Therefore shouldn’t I be styling via css? If I’m totally off here, can you step me through it?

Can we make squares around EVERY module like the login module on the front page?</blockquote>

You can try to use my solution below

Open templates/beez3/css/personal.css file and add new rule


.moduletable h3{
border-bottom: solid 1px #ddd ;
background: url(http://bmwccottawa.org/templates/bmwccottawa/images/bgi/small-title-bg.png) no-repeat top left;
height: 20px;
width: 191px;
font: bold 12px Arial, Helvetica, sans-serif;
color: #6d6d6d ;
text-transform: uppercase;
text-shadow: 1px 1px 1px #e8e8e8 ;
padding: 8px 0 8px 14px;
}

1 user says Thank You to Ninja Lead for this useful post

1. sebbs

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#545538

Hey that worked great! Is there a way we can make them auto size based on the screen the user or would I need to create a new background for that?

http://bmwqc2.dev.dnsnetworks.ca/joomla/

<em>@Ninja Lead 440665 wrote:</em><blockquote>You can try to use my solution below

Open templates/beez3/css/personal.css file and add new rule


.moduletable h3{
border-bottom: solid 1px #ddd ;
background: url(http://bmwccottawa.org/templates/bmwccottawa/images/bgi/small-title-bg.png) no-repeat top left;
height: 20px;
width: 191px;
font: bold 12px Arial, Helvetica, sans-serif;
color: #6d6d6d ;
text-transform: uppercase;
text-shadow: 1px 1px 1px #e8e8e8 ;
padding: 8px 0 8px 14px;
}

</blockquote>

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#545542

I’m wondering if you can use a smaller (width) background image with a “repeat-x” modifier ….
. . . to a “max-width” of 191px.

This is just a brainstorm idea – not certain if it will work or not.

I’d like to see Ninja Lead’s thoughts as well. 😎

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#545690

Any ideas on how I would go about that?

Yes, I would like to here Ninja Leads ideas as well.

<em>@TomC 440771 wrote:</em><blockquote>I’m wondering if you can use a smaller (width) background image with a “repeat-x” modifier ….
. . . to a “max-width” of 191px.

This is just a brainstorm idea – not certain if it will work or not.

I’d like to see Ninja Lead’s thoughts as well. :cool:</blockquote>

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#545706

How can we make the module heading styles exactly like they are in this site : http://www.trillium-bmwclub.ca/

<em>@Ninja Lead 440665 wrote:</em><blockquote>You can try to use my solution below

Open templates/beez3/css/personal.css file and add new rule


.moduletable h3{
border-bottom: solid 1px #ddd ;
background: url(http://bmwccottawa.org/templates/bmwccottawa/images/bgi/small-title-bg.png) no-repeat top left;
height: 20px;
width: 191px;
font: bold 12px Arial, Helvetica, sans-serif;
color: #6d6d6d ;
text-transform: uppercase;
text-shadow: 1px 1px 1px #e8e8e8 ;
padding: 8px 0 8px 14px;
}

</blockquote>

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#545747

Please try this way to have auto size based on the screen.

Open the templates/beez3/css/personal.css file

change:


.moduletable h3{
border-bottom: solid 1px #ddd ;
background: url(http://bmwccottawa.org/templates/bmwccottawa/images/bgi/small-title-bg.png) no-repeat top left;
height: 20px;
width: 191px;
font: bold 12px Arial, Helvetica, sans-serif;
color: #6d6d6d ;
text-transform: uppercase;
text-shadow: 1px 1px 1px #e8e8e8 ;
padding: 8px 0 8px 14px;
}


to


.moduletable h3 {
background: #fff url('http://www.trillium-bmwclub.ca/sites/trillium-bmwclub.ca/themes/sky/images/bg-shade-light.png') repeat-x bottom left;
color: #777 ;
display: block;
font-weight: 700;
letter-spacing: normal;
text-align: left;
font-size: 1.1em;
padding: 5px 10px;
margin: 0;
text-shadow: #fff 1px 1px 1px;
color: #555 ;
-moz-border-radius-topleft: 0.333em;
-webkit-border-top-left-radius: 0.333em;
-moz-border-radius-topright: 0.333em;
-webkit-border-top-right-radius: 0.333em;
border-radius-topright: 0.333em;
border-radius-topleft: 0.333em;
border: solid 1px #ddd ;
border-bottom: 0;
}

1 user says Thank You to Ninja Lead for this useful post

1. sebbs

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#546435

Yes!!! This look amazing! http://bmwqc2.dev.dnsnetworks.ca/joomla/ I totally want to be as good as all you guys! Thanks!

<em>@Ninja Lead 441026 wrote:</em><blockquote>Please try this way to have auto size based on the screen.

Open the templates/beez3/css/personal.css file

change:


.moduletable h3{
border-bottom: solid 1px #ddd ;
background: url(http://bmwccottawa.org/templates/bmwccottawa/images/bgi/small-title-bg.png) no-repeat top left;
height: 20px;
width: 191px;
font: bold 12px Arial, Helvetica, sans-serif;
color: #6d6d6d ;
text-transform: uppercase;
text-shadow: 1px 1px 1px #e8e8e8 ;
padding: 8px 0 8px 14px;
}


to


.moduletable h3 {
background: #fff url('http://www.trillium-bmwclub.ca/sites/trillium-bmwclub.ca/themes/sky/images/bg-shade-light.png') repeat-x bottom left;
color: #777 ;
display: block;
font-weight: 700;
letter-spacing: normal;
text-align: left;
font-size: 1.1em;
padding: 5px 10px;
margin: 0;
text-shadow: #fff 1px 1px 1px;
color: #555 ;
-moz-border-radius-topleft: 0.333em;
-webkit-border-top-left-radius: 0.333em;
-moz-border-radius-topright: 0.333em;
-webkit-border-top-right-radius: 0.333em;
border-radius-topright: 0.333em;
border-radius-topleft: 0.333em;
border: solid 1px #ddd ;
border-bottom: 0;
}

</blockquote>

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#546436

<em>@sebbs 441884 wrote:</em><blockquote>Yes!!! This look amazing! http://bmwqc2.dev.dnsnetworks.ca/joomla/ I totally want to be as good as all you guys! Thanks!</blockquote>

so do I 😉

[Author]

Posts