I'm new to Joomla and am using my compuer as a host so I can't provide you with a sample of my work or a link to my website. However, I have some questiosn I am hoping you can answer...
1) Is there a way to add article separators to the J51_Oxygen template similar to the ones in the picture below? I have been able to access the css but when I add it to my template nothing happens.
.article_separator {border-bottom: 2px dotted #CABFB1; display: block;
height:3px; margin: 10px 0; width: 100%;
2)How do I add a picture before an article title like in the pictre below?
3)How do I get my sidecolumn to appear an the right side instead of the left likein the picture below?
If any of these are possible, what css do I add to which templates?
Thank you for your help with this! I have spent hours searching the net and trying different things but as you know each template is different and so far nothing I have done seems to work. I really appreciate any and all responses.
- mclaugh01
-
- Free Templates / Extensions
- Wednesday, 04 April 2012
- Subscribe via email
Hi
For your seperator may I suggest adding the following instead..
You can style the article titles with the following CSS selector..
The sidecolumn can be swithced from left to right via the templates parameters (Extensions -> Template Manager -> J51_Oxygen)
Ciarán
For your seperator may I suggest adding the following instead..
.item-separator {
border-bottom: 2px dotted #CABFB1;
display: block;
height:3px;
margin: 10px 0;
width: 100%;
}
You can style the article titles with the following CSS selector..
h2, h2 a:link, h2 a:visited, .contentheading {}
The sidecolumn can be swithced from left to right via the templates parameters (Extensions -> Template Manager -> J51_Oxygen)
Ciarán
- more than a month ago
- Free Templates / Extensions
- # 1
Ciarán, you rock. The item separator worked perfectly as did the side column issue. I'm am not very css proficient so I'm a little unsure how to add the picture before the article titles. Here's what I added to the bottom of the template.css file but it doesn't seem to be working, any thoughts.....
h2, h2 a:link, h2 a:visited, .contentheading {url("../images/cross.png" no-repeat;*/}
Also, since you seem so proficient...
1)Any chance you can tell me how to center my logo at the top of this picutre. I used the following css but it's not centered and I don't want to have to fidgit with the left % amount.
2)How do I remove the extra space above the titles so they are closer together?
3)My print icon has dissappeared. In the article manager options icons are set to show and the print icon is also set to show but only the email seems to show.
h1.logo a {position:center; left: 30%;}
Thanks again for all of your help. I can't believe you were able to provide this info so eaily...especially after I spent hours looking for the answers. Thanks again!
h2, h2 a:link, h2 a:visited, .contentheading {url("../images/cross.png" no-repeat;*/}
Also, since you seem so proficient...
1)Any chance you can tell me how to center my logo at the top of this picutre. I used the following css but it's not centered and I don't want to have to fidgit with the left % amount.
2)How do I remove the extra space above the titles so they are closer together?
3)My print icon has dissappeared. In the article manager options icons are set to show and the print icon is also set to show but only the email seems to show.
h1.logo a {position:center; left: 30%;}
Thanks again for all of your help. I can't believe you were able to provide this info so eaily...especially after I spent hours looking for the answers. Thanks again!
- more than a month ago
- Free Templates / Extensions
- # 2
Hi
For your article headers try using the following..
[code type=css]h2, h2 a:link, h2 a:visited, .contentheading {background: url("../images/cross.png" no-repeat;*/} [/code]
You can re-position the logo with the following, changing 20px to your own taste..
[code type=css]h1.logo a {left:20px;}[/code]
For the space above the article and your print icon I will need a URL to your site so maybe post it here when you have your site uploaded and we will take another look.
Ciarán
For your article headers try using the following..
[code type=css]h2, h2 a:link, h2 a:visited, .contentheading {background: url("../images/cross.png" no-repeat;*/} [/code]
You can re-position the logo with the following, changing 20px to your own taste..
[code type=css]h1.logo a {left:20px;}[/code]
For the space above the article and your print icon I will need a URL to your site so maybe post it here when you have your site uploaded and we will take another look.
Ciarán
- more than a month ago
- Free Templates / Extensions
- # 3
Thanks again for your help, you are truly a wiz at this stuff. I am so not adept enough to do all of this so I really appreciate your help. Firebug has been great but it can only go so far with someone like me, lol.
Your fix for the logo worked great, thanks! Also, this morning when I logged in the print/email icons were back, weird but good.
The articl header didn't quite work. It posted it but it's more like a verticle line not the picture and it's not at the front of the title. I'm attaching a picture. Any thoughts?
Sorry if I posted too much info below, I wasn't sure what you might need to help with these questions.
Thanks again for all of your help. You are truly saving me hours and hours of work.
Here's what I have in my template.css file
Your fix for the logo worked great, thanks! Also, this morning when I logged in the print/email icons were back, weird but good.
The articl header didn't quite work. It posted it but it's more like a verticle line not the picture and it's not at the front of the title. I'm attaching a picture. Any thoughts?
Sorry if I posted too much info below, I wasn't sure what you might need to help with these questions.
Thanks again for all of your help. You are truly saving me hours and hours of work.
Here's what I have in my template.css file
* Typography */
.contentpaneopen {width: 100%;}
#content80, #content100 {line-height:20px;}
a:link, a:visited {font-size: 12px; text-decoration: none;}
a:hover {color: #888; text-decoration:underline;}
#footer {font-size:0.7em; color:#aaa; padding-top:10px;}
#footer a {color:#a48e79;}
.content_header {display:block !important; margin:0 0 -1px 0 !important; padding:5px 0px 0px 10px !important;}
h1,.componentheading {font-size:1.5em; padding: 0px 0px 2px 5px; font-family:"Century Gothic",Arial,Verdana,sans-serif;}
h2,h2 a:link,h2 a:visited, .contentheading{ url("../images/cross.png"); font-size:26px; color:#333; letter-spacing:0px; margin:0 !important; padding:0px 0 0px!important;
font-weight:normal; height:auto; font-family: Trebuchet MS,Arial,Helvetica,sans-serif; font-weight: normal; }
h4 {font-size:1.3em;}
h4 {font-size:1.2em;}
h5 {font-size:1.1em;}
h6 {font-size:1em;font-weight:700;}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label, .mainconent ul,ol,dl,fieldset,address {margin:0.5em 0;}
ol {list-style: decimal outside; }
#wrapper ul {margin: 0px;padding-left: 0px;list-style: none;}
#wrapper li {line-height:17px; text-indent: 0px;padding-top:0px; padding-left:18px;}
li {background-image: url(../images/arrow-1.png) ;background-repeat: no-repeat;background-position: 5px 6px;}
ul li ul {padding-left: 0px;}
.article_separator {display:none; margin:0;}
.row_separator {display:none;}
td.buttonheading {width: 16px;}
.maincontent li, .maincontent dd {margin-left:1em;}
fieldset {padding:.5em;}
img {border:0px;}
- more than a month ago
- Free Templates / Extensions
- # 4
I figured out the spacing issue to some extent, I changed the index.php file by removing two </div> in the module padding for user1 before the <?php but it now has too little space before and after instead of too much (see attached picture). Anyone know how to put in 1/2 a line spacing?
[code type=css] <div class="wrapper_moduleblock1">
<?php if ($this->countModules('user1')) { ?>
<div class="moduleblock1" style="width:<?php echo $modules_123_width ?>;"><div class="module_padding"><jdoc:include type="modules" name="user1" style="j51_module"/><?php } ?>
<?php if ($this->countModules('user2')) { ?>
<div class="moduleblock1" style="width:<?php echo $modules_123_width ?>;"><div class="module_padding"><jdoc:include type="modules" name="user2" style="j51_module"/></div></div><?php } ?>
<?php if ($this->countModules('user3')) { ?>
<div class="moduleblock1" style="width:<?php echo $modules_123_width ?>;"><div class="module_padding"><jdoc:include type="modules" name="user3" style="j51_module"/></div></div><?php } ?>
</div>[/code]
[code type=css] <div class="wrapper_moduleblock1">
<?php if ($this->countModules('user1')) { ?>
<div class="moduleblock1" style="width:<?php echo $modules_123_width ?>;"><div class="module_padding"><jdoc:include type="modules" name="user1" style="j51_module"/><?php } ?>
<?php if ($this->countModules('user2')) { ?>
<div class="moduleblock1" style="width:<?php echo $modules_123_width ?>;"><div class="module_padding"><jdoc:include type="modules" name="user2" style="j51_module"/></div></div><?php } ?>
<?php if ($this->countModules('user3')) { ?>
<div class="moduleblock1" style="width:<?php echo $modules_123_width ?>;"><div class="module_padding"><jdoc:include type="modules" name="user3" style="j51_module"/></div></div><?php } ?>
</div>[/code]
- more than a month ago
- Free Templates / Extensions
- # 5
Hi
Its difficult to give a definite solution without access to your site. Once you have your site uploaded to a server post the URL here and we should be able to resolve any issue you may have.
Ciarán
Its difficult to give a definite solution without access to your site. Once you have your site uploaded to a server post the URL here and we should be able to resolve any issue you may have.
Ciarán
- more than a month ago
- Free Templates / Extensions
- # 6
Accepted Answer
Pending Moderation
I think all of you have already answered your query. If you are a beginner the best way to edit your templates without harming them is by using firefox addon firebug.
After seeing the changes you can actually implement it in the actual template.
After seeing the changes you can actually implement it in the actual template.
- more than a month ago
- Free Templates / Extensions
- # 7
Accepted Answer
Pending Moderation
Hi
For your seperator may I suggest adding the following instead..
.item-separator {
border-bottom: 2px dotted #CABFB1;
display: block;
height:3px;
margin: 10px 0;
width: 100%;
}
You can style the article titles with the following CSS selector..
h2, h2 a:link, h2 a:visited, .contentheading {}
The sidecolumn can be swithced from left to right via the templates parameters (Extensions -> Template Manager -> J51_Oxygen)
Ciarán
where insert the .item-separator
thanks
- more than a month ago
- Free Templates / Extensions
- # 8
The CSS can be added to the Custom CSS field within the templates parameters (Extensions -> Template Manager -> J51_Oxygen).
Ciarán
Ciarán
- more than a month ago
- Free Templates / Extensions
- # 11
- Page :
- 1
There are no replies made for this post yet.
Be one of the first to reply to this post!
Be one of the first to reply to this post!
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here. Register Here »