Joomla Templates Club 406,261 posts

[ollyjk Friend ollyjkJoin date: June 2008Posts: 77Downloads:0Uploads:26 Thanks: 7]

#131288

i have a template using the jateline II template at http://www.oliverjamesenterprise.com/fourshiresmag

I have been trying to change it so that it has the grey sides with the help of others in this forum. There are however ever so slight problems with the alignment of the modules and white section as shown and explained in the attached zipped pdf document. you help is very much appreciated.

Ol

---

Attachments:

1. Slight-template-problems-demonstrated.zip

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#262037

What I can add to the discussion:

The Main Menu appears wider than the header due to the 1 px left and right borders:

To fix:
template.css – line 887

Change from this:


#ja-mainnav {template.css (line 887)
background:#FFFFFF none repeat scroll 0% 0%;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:1px solid #CCCCCC;
}

To this:


#ja-mainnav {template.css (line 887)
background:#FFFFFF none repeat scroll 0% 0%;
border-left:0px solid #CCCCCC;
border-right:0px solid #CCCCCC;
border-top:1px solid #CCCCCC;
}

And then to fix the Main Content .. on template.css line 548

Change from this:


#ja-container {template.css (line 548)
background:#FFFFFF url(../images/vline.gif) repeat-y scroll 65% 0pt;
padding:4px;
}

To this:


#ja-container {template.css (line 548)
background:#FFFFFF url(../images/vline.gif) repeat-y scroll 65% 0pt;
padding:0px;
}

Have fun!
John.

[ollyjk Friend ollyjkJoin date: June 2008Posts: 77Downloads:0Uploads:26 Thanks: 7]

#262084

wow that worked to align it – however if you go here http://www.oliverjamesenterprise.com/fourshiresmag/index.php?option=com_content&view=article&id=81:avon-social-night&catid=910:out-and-about&Itemid=245

is there any way that the sides can be brought in e.g. the main text is right next to the edge of the actual white section – can this be brought in say a couple of px – how can you do this?

Also, is there anyway to prevent the line from appearing right across the page?

Many thanks!!

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#262098

Okay here are some fixes:

CAUTION:
Your problems all surround your changing the background color of the template. Perhaps that’s what your client wants…but I personally would have pushed him toward another template.

This template is fine – actually it’s AWESOME – on a clean white background so it was coded without the need for margin padding (white on white). But by changing the background color you will now need to do a little surgery not only today…but probably way into the future as you introduce new elements.

Doable…but may become a headache. And the client you’re building this for might want to know.

Anyway….

The following are some workarounds:

template.css (line 940) – Slides down the breadcrumbs to correct position:


#ja-pathway {
padding:10pt 2px;
}


ja.news.fp.css (line 16) – adds padding to content area


#jazin-hlwrap {
border-bottom:5px solid #ABABAB;
border-top:1px solid #CCCCCC;
clear:both;
padding:10px;
}


template.css (line 609) – Adds padding and squeezes back the right module to fit. You will probably want to change the width of the left column as well to match.


#ja-col2 {
float:right;
overflow:hidden;
padding:0px 10px 0px 0px;
width:47%;
}


[ollyjk Friend ollyjkJoin date: June 2008Posts: 77Downloads:0Uploads:26 Thanks: 7]

#262111

Many thanks – however done this and it doenst seem to have done much. If you go to the article here:

http://www.oliverjamesenterprise.com/fourshiresmag/index.php?option=com_content&view=article&id=81:avon-social-night&catid=910:out-and-about&Itemid=245

you can see how the text is really close to the left…

The thing is i have mentioned this and they need the background the different colour – this might go blue in the end. toruble is, do all ja templates use ja news ie we need the functionality to work the same along with the most read and the editorial features sections etc …..

Many thanks – thoughts welcome…

[sanjiovani Friend sanjiovaniJoin date: September 2006Posts: 217Downloads:0Uploads:32 Thanks: 15 Thanked: 1 times in 1 posts]

#262633

how do i change the background color of the about us section to white without having to change the bacground color of the entire site ?

http://www.fashionistas.cc/index.php?option=com_content&view=article&id=26&Itemid=273

[ollyjk Friend ollyjkJoin date: June 2008Posts: 77Downloads:0Uploads:26 Thanks: 7]

#262671

Hiya,
How did you manage to change it so that your main text in an article eg http://www.fashionistas.cc/index.php?option=com_content&view=category&layout=blog&id=81&Itemid=198

has white space. I cant seem to get mine to get the space to the left like yours. e.g.:

http://oliverjamesenterprise.com/fourshiresmag/index.php?option=com_content&view=article&id=81:avon-social-night&catid=910:out-and-about&Itemid=245

Thanks in advance

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#263784

Easy fix to the problem with the text being flush left:

In template.css (line 566)

Change the following:


#ja-content div.ja-innerpad {template.css (line 566)
padding:0 15px 0 0;
}

So that it reads:


#ja-content div.ja-innerpad {
padding:0 15px;
}

If you would rather have larger or smaller left and right margins in the content area, then just change “15px” to whatever size looks best to you.

John.

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#263789

sanjiovani –

I’ll give you the solution to your background question…if you’ll tell me the module/software you used to create that AWESOME photo gallery at http://www.fashionistas.me

Here’s your solution:

In template.css – Line 665 – you’ve somehow got a bizarre piece of css.
Just delete the RED line…and you’re in business…white background in the content area, leaving your dark background alone.


#ja-containerwrap-c #ja-container {
background:transparent url(../images/hline.gif) repeat-y scroll 83% 0;
}

Now…how about letting me in on your gorgeous photo gallery secret! 😀

John.

[ollyjk Friend ollyjkJoin date: June 2008Posts: 77Downloads:0Uploads:26 Thanks: 7]

#263791

Hi john,

For some reason i cant get any of what you have said to work – take a look at http://www.oliverjamesenterprise.com/fourshiresmag

Is it worth me starting again? you can still see how the text is still way left…. your thoughts v much welcomed as clients wanting results and its v frustrating.

As far as the image gallery goes, whilst this is not my site and it doesnt look as though they have used joomla to create this – however if joomla was used i would use something like the plugins that allow images within facebook and copper gallery work….hope this helps : )

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#263793

Ollyjk,

I wouldn’t give up quite yet…but keep in mind that all changes you make have sort of a “cause and effect” to it.

Case in point: your current issue with the text flushing left.

You can bring the text in by changing

The following – template.css (line 559)


#ja-content {
clear:both;
display:block;
float:left;
padding:10px;
width:60%;
}

What we’ve done above is create a 10px buffer which pulls the text in. But that created another problem with your “HOT TOPICS” in the RIGHT module area…as it put the squeeze on them and forced the right column down. So to compensate we reduced the width of the main content area to 60%…and now everything should fit.

BUT in padding the sides…we’ve also caused the LEAD STORY area to come in as well…so the changes you apparently made to that section previous will now have to be changed to compensate.

If you want the LEAD STORY area to line up vertically on the left with your subcategories below then you’ll need to remove the extra padding around that area, like so…

ja.news.fp.css (line 59)

From this:


#jahl-newsitem {
padding:5px;
}


To this:


#jahl-newsitem {
padding:0px;
}

Happy editing!
John.

1 user says Thank You to John Wesley Brett for this useful post

1. ollyjk

[ollyjk Friend ollyjkJoin date: June 2008Posts: 77Downloads:0Uploads:26 Thanks: 7]

#263806

oh thats great!!!! i think i pretty much have everything now – THANK YOU SO MUCH – so renewing my subscription with joomlart in sept! my only other problem now is that at http://oliverjamesenterprise.com/fourshiresmag/ how can i bring the footer inline with the text….see how its positioned to the left?

Many thanks

Olly

[ollyjk Friend ollyjkJoin date: June 2008Posts: 77Downloads:0Uploads:26 Thanks: 7]

#263807

OK, figured that out – http://www.oliverjamesenterprise.com/fourshiresmag however the RSS feed now appears perhaps slightly too far to the right? can this me moved so theres a border to the right perhaps? Many thanks for your help! cant believe its nearly done!! such a relief! THANKS!

[John Wesley Brett Moderator John Wesley BrettJoin date: July 2013Posts: 2142Downloads:17Uploads:26 Thanks: 175 Thanked: 645 times in 426 posts]

#263898

That’s great!

And here’s the fix for your RSS Feed button:

Change template.css (line 1102)

to the following:


.ja-cert {
position:absolute;
right:10px;
top:10px;
}

Have a GREAT week!
John

1 user says Thank You to John Wesley Brett for this useful post

1. ollyjk

[ollyjk Friend ollyjkJoin date: June 2008Posts: 77Downloads:0Uploads:26 Thanks: 7]

#263901

Many thanks John! Works a treat – regarding that photo gallery i was thinking perhaps they used mambo?

You dont know how to change the teline II template so that the line that is under the main menu which normally stretches across the page, cant be changed so that it is inline with the content width – so not strecthing right across the page?

All the best,

olly

[Author]

Posts