In the backend of the site, go to module manager and at the top right hand side of the page click the "new" button.
Select the option that says; "custom html"
Position it on the left or the right hand side of the website, give it a title that you will remember and add code for the link with a picture to the edit code section.
Save the custom module.
Now go into the template manager section and select the default template, click edit. Then click the option to edit CSS files. Click the section of CSS that deals with modules...it should say "modules.css"
Scroll down until you see something that says div.moduletable:
div.moduletable {
width: auto;
margin:0 0 20px 0;
padding: 3px;
border:1px solid #ccc;
background:#fefefe;}
copy this code and paste it to notepad or similar, then adjust that code as you desire for your custom module's generic style.
rename it something like:
.moduletablecustom_ads
mine looks like this:
.moduletablecustom_ads {
width: auto;
margin:0 0 10px 0;
padding: 2px;
border:0px solid #fff;
background:#fefefe;}
Now go to where you can edit the template.css and paste that code in there. (This will ensure that the module reads the changes in case the modules section doesn't load...like mine wasn't.)
Now click save and go back to the module manager section. Click on your module that you created and in the Parameters section on the right hand side, where it says "Module Class Suffix" enter the suffix you named your div. For me this was what I entered:
custom_ads
click save and refresh your site's frontend and you should see your add or link with the custom changes! Now anytime you want a link on that site with those exact specifications, you can simply add a new module in the module manager and put in the module class suffix for the css you edited, and it will modify it accordingly. Voila.
Select the option that says; "custom html"
Position it on the left or the right hand side of the website, give it a title that you will remember and add code for the link with a picture to the edit code section.
Save the custom module.
Now go into the template manager section and select the default template, click edit. Then click the option to edit CSS files. Click the section of CSS that deals with modules...it should say "modules.css"
Scroll down until you see something that says div.moduletable:
div.moduletable {
width: auto;
margin:0 0 20px 0;
padding: 3px;
border:1px solid #ccc;
background:#fefefe;}
copy this code and paste it to notepad or similar, then adjust that code as you desire for your custom module's generic style.
rename it something like:
.moduletablecustom_ads
mine looks like this:
.moduletablecustom_ads {
width: auto;
margin:0 0 10px 0;
padding: 2px;
border:0px solid #fff;
background:#fefefe;}
Now go to where you can edit the template.css and paste that code in there. (This will ensure that the module reads the changes in case the modules section doesn't load...like mine wasn't.)
Now click save and go back to the module manager section. Click on your module that you created and in the Parameters section on the right hand side, where it says "Module Class Suffix" enter the suffix you named your div. For me this was what I entered:
custom_ads
click save and refresh your site's frontend and you should see your add or link with the custom changes! Now anytime you want a link on that site with those exact specifications, you can simply add a new module in the module manager and put in the module class suffix for the css you edited, and it will modify it accordingly. Voila.
No comments:
Post a Comment