- Posts: 103
- Thank you received: 1
Round corners for user2 module
-
joa
Inactive member -
Topic Author
- Member
-
Less
More
11 years 8 months ago #31482
by joa
Round corners for user2 module was created by joa
I have a picture with all sponsor logos under user2 and it has rounded corners but this is just one picture.
joomla.bcmarburg.de
I would like toadd round corners to the user2 module in case a background picture is added so that the background picture always has round corners.
I added the following code to the user2 moduletable in template.css.css
.user2 .moduletable {
margin:5px;
padding-bottom:3px !important;
padding-top:3px !important;
background-color:#343594;
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-webkit-border-radius:10px 10px 10px 10px; /* Chrome, Safari */
-khtml-border-radius:10px 10px 10px 10px; /* Konqueror */
border-radius:10px 10px 10px 10px; /* CSS3 */
}
I figured out that this would only have an impact if I am assigning a background color. But not every module assigned to user2 shall have a background some of some shall apear transparent as it is with the picures now below the sponsor logos
Is there a chance to create another module like user10 and allocate it in the layout below user2 one with background and user2 without?
What would be the code?
joomla.bcmarburg.de
I would like toadd round corners to the user2 module in case a background picture is added so that the background picture always has round corners.
I added the following code to the user2 moduletable in template.css.css
.user2 .moduletable {
margin:5px;
padding-bottom:3px !important;
padding-top:3px !important;
background-color:#343594;
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-webkit-border-radius:10px 10px 10px 10px; /* Chrome, Safari */
-khtml-border-radius:10px 10px 10px 10px; /* Konqueror */
border-radius:10px 10px 10px 10px; /* CSS3 */
}
I figured out that this would only have an impact if I am assigning a background color. But not every module assigned to user2 shall have a background some of some shall apear transparent as it is with the picures now below the sponsor logos
Is there a chance to create another module like user10 and allocate it in the layout below user2 one with background and user2 without?
What would be the code?
Please Log in to join the conversation.
-
ivan.milic
Support Staff -
- Moderator
-
Less
More
- Posts: 14116
- Thank you received: 1639
11 years 8 months ago #31487
by ivan.milic
Replied by ivan.milic on topic Round corners for user2 module
Can you please tell us more directly what you need?
Please Log in to join the conversation.
-
joa
Inactive member -
Topic Author
- Member
-
Less
More
- Posts: 103
- Thank you received: 1
11 years 8 months ago #31506
by joa
Replied by joa on topic Round corners for user2 module
On the page joomla.bcmarburg.de the template position "user2" has a transparent background. I would like to add the opportunity to add in the user2 area modules which have a background with round corners. Since round corners could only be visibly applied if a background color is assigned, I currently could have elements in user2 with or without a background. Thus is there a way to add another position below user2 in the template called e.g. "user10" for which I can set a colored background. Similar to the top left/top right column and left/right column?
Please Log in to join the conversation.
-
joa
Inactive member -
Topic Author
- Member
-
Less
More
- Posts: 103
- Thank you received: 1
11 years 8 months ago #31507
by joa
Replied by joa on topic Round corners for user2 module
I probably found a solution since I could assign a module to advert1 section. If nothing is displayed for 2-4 it appears as a block across the page but I wasn't able to define the necessary cody in template.css.css for the blue background with rounded corners.
I changed in template settings the background color of the bottom modules to blue but how can I define rounded corners?
Is there also a chance to distinguish between the background color of modules appearing in the advert 1-4 position and the user5-8 position?
I tried adding this to template.css.css but wasn't successful:
.advert1 .moduletable {
margin:5px;
padding-bottom:3px !important;
padding-top:3px !important;
background-color:#343594;
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-webkit-border-radius:10px 10px 10px 10px; /* Chrome, Safari */
-khtml-border-radius:10px 10px 10px 10px; /* Konqueror */
border-radius:10px 10px 10px 10px; /* CSS3 */
}
I changed in template settings the background color of the bottom modules to blue but how can I define rounded corners?
Is there also a chance to distinguish between the background color of modules appearing in the advert 1-4 position and the user5-8 position?
I tried adding this to template.css.css but wasn't successful:
.advert1 .moduletable {
margin:5px;
padding-bottom:3px !important;
padding-top:3px !important;
background-color:#343594;
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-webkit-border-radius:10px 10px 10px 10px; /* Chrome, Safari */
-khtml-border-radius:10px 10px 10px 10px; /* Konqueror */
border-radius:10px 10px 10px 10px; /* CSS3 */
}
Please Log in to join the conversation.
-
ivan.milic
Support Staff -
- Moderator
-
Less
More
- Posts: 14116
- Thank you received: 1639
11 years 8 months ago #31511
by ivan.milic
Replied by ivan.milic on topic Round corners for user2 module
Best use suffix for each module but with first blank char like " rounded1" then adding this css class would do:
.rounded1{
...
}
this would be universal not matter where module is located
.rounded1{
...
}
this would be universal not matter where module is located
Please Log in to join the conversation.
-
joa
Inactive member -
Topic Author
- Member
-
Less
More
- Posts: 103
- Thank you received: 1
11 years 8 months ago #31547
by joa
Replied by joa on topic Round corners for user2 module
Ok what would be the code?
Shall I Insert a general section like this:?
.round1 {
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-webkit-border-radius:10px 10px 10px 10px; /* Chrome, Safari */
-khtml-border-radius:10px 10px 10px 10px; /* Konqueror */
border-radius:10px 10px 10px 10px; /* CSS3 */
}
In IE9 the corners are not rounded, is there another syntax error?
I used border....
Shall I Insert a general section like this:?
.round1 {
-moz-border-radius:10px 10px 10px 10px; /* Firefox */
-webkit-border-radius:10px 10px 10px 10px; /* Chrome, Safari */
-khtml-border-radius:10px 10px 10px 10px; /* Konqueror */
border-radius:10px 10px 10px 10px; /* CSS3 */
}
In IE9 the corners are not rounded, is there another syntax error?
I used border....
Please Log in to join the conversation.
Time to create page: 0.175 seconds