ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down.
Read our Farewell Blog Post for more details.
Trouble working with a non-RT theme.
-
-
- Dan J
- Jr. Rocketeer
- Posts: 49
- Thanks: 0
-
I posted on the Joomla forums but I trust the people here more.
I'm not working with a rockettheme theme, I'm building one from scratch, converting it for someone else from the HTML they made.
I'm converting an HTML based site to a Joomla template.
The site I'm converting is here:
www.polepositionvip.com/index.html
The demo of the joomla template is here:
alttabbed.net/vipdemo/
Here are my questions:
On the home page, the four paragraphs should be side by side, two colums. For some reason they're all in one line. There's enough room for it, and the HTML is written for it to do it, but it's not.
Same problem with the Events page, the pictures there should be in three columns, but Joomla (or my css/php) is squishing it all to one side.
Also, even though they're all coded the same way, the H1 headings on each page have a gray line going across them which shouldn't be there. For some reason, on the home page the H1 doesn't. No clue what's going on there.
I've been building this template from scratch using the CSS and the HTML provided to me so it could be an error anywhere along the line. Would really appreciate any comments anyone might have.
I know this is probably unusual but most of the people here are a lot smarter then me and you have to go where the goods are.
-
-
-
- Jamesso
- Elite Rocketeer
- Posts: 500
- Thanks: 0
-
Dan,
Wrap all those boxes in a new class. Give that class the attributes:
float: left;
width: 40%
Remove those same attributes from the box and box odd classes. You will have to play with the margins and width a little bit to get it to look right.
The gray line showing is coming from your footer. It's because of the way you've setup your divs and the attributes you've applied to them. If you move footer up one level it should work better. -
Afterburner Mobile Template
Panels - Mynxx-Style Dropdown Display for Modules
Gridlock - A Custom Gantry Template
-
-
-
- Dan J
- Jr. Rocketeer
- Posts: 49
- Thanks: 0
-
That would most likely work, with the box css, but my worry is that it's happening on the events page too, which isn't using the box CSS reference, which makes me think that I have a misplaced piece of code somewhere that is not only causing a problem now, but could cause problems down the line.
On the main page, it should look like:
About Us How We Work
Exclusive Service Hear from our Clients
On the events page, there should be the three columns of those pictures, but they've all lined up into one.
It also doesn't matter whether I have the modules on the right enabled or not, everything still switches to the left.
You were dead-on with the footer thing, though I haven't figured out the right place to put it, at least I know what direction to head in.
Another issue I found is for some reason the "Active link" css isn't showing. The active menu link should be red.
#menu { border-top: solid 5px #e67817; font-size: 10px; margin-top: -1px; margin-right: 7px; }
#menu li { display: inline; text-indent: 0; }
#menu li a { background: #e0e0e0; text-decoration: none; color: #454545; text-align: center; margin-right: 1px; display: block; width: 120px; height: 23px; float: left; padding-top: 5px; margin-top: 1px; }
#menu li a:hover { background: #848484; color: #fff; }
#menu li a.selected { background: #e46f09; height: 27px; color: #fff; margin-top: -1px; padding-top: 13px; font-weight: bold; }
#menu li a.active { background: #e46f09; height: 27px; color: #fff; margin-top: -1px; padding-top: 13px; font-weight: bold; }
Thanks to all in advance for any help
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29363
- Thanks: 956
- Volunteer
-
Thats just a matter of width or margins I think ...
#content .main .box {
float: left;
width: 230px;
font-family: Geneva, Verdana;
}
#content .main .odd { margin-right: 20px; }
Nice site btw. :cheesy:
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29363
- Thanks: 956
- Volunteer
-
Sorry Edit:
#content .main {
width: 840px;
margin-right: 20px;
float: left;
position: relative;
}
And place the picture on the right into the first article on this page.
If you float it dont forget to clear ...
And perhaps you have to create different templates to get the different widths on each site ...
Well ... Jamesso should be more experienced than me. Follow his tips .. - Last Edit: 16 years 2 months ago by Henning.
-
-
-
- Dan J
- Jr. Rocketeer
- Posts: 49
- Thanks: 0
-
Henning Bokelmann wrote:
Thats just a matter of width or margins I think ...
#content .main .box {
float: left;
width: 230px;
font-family: Geneva, Verdana;
}
#content .main .odd { margin-right: 20px; }
Nice site btw. :cheesy:
Thanks!
Well, I started with this and changed the 230px to 40%, which makes every page look the way it should with the exception of the events.
The issue is that since it's all under the main content, the events page is also going to 40%. Is there a way I can create a
.main .events
kind of thing, and apply it just to the events page so that the colums there go to 100%, and everything else stays at 40.
I mean, I know there is, but my mind has melted through my ear.
-
-
-
- Dan J
- Jr. Rocketeer
- Posts: 49
- Thanks: 0
-
Henning Bokelmann wrote:
Sorry Edit:
#content .main {
width: 840px;
margin-right: 20px;
float: left;
position: relative;
}
And place the picture on the right into the first article on this page.
If you float it dont forget to clear ...
And perhaps you have to create different templates to get the different widths on each site ...
Well ... Jamesso should be more experienced than me. Follow his tips ..
Actually, thinking of this, couldn't I duplicate my template, call the clone VIPevents or whatever, make the 100% change then apply it only to the events page?
I mean, it would take some time, but it would get the job done.
-
Time to create page: 0.078 seconds