.css files from2.5 version

Hello,

I started with the Joomla 2.5 version of this early this year, but I just installed two new sites today using the Joomla 3.1 version.


I drastically changed the the CSS files in the Joomla 2.5 version, and it took weeks of intensive work. The layout and most other features of the Joomla 2.5 and Joomla 3.1 versions seem to be the same.

Thus, Is it possible to simply replace the CSS files of the new sites using the Joomla 3.1 version with the revised CSS files from the the Joomla 2.5 version?

Cornelio

Have You been modifying source files, or were You using override.css?

Have You been modifying source files, or were You using override.css?

Hi Cyberek,

I modify the source files.

Cornelio

Sadly - there is no easy way. Next time please use override.css as this is best way if in future template will release an upgrade and You will like to use it.

Sadly - there is no easy way. Next time please use override.css as this is best way if in future template will release an upgrade and You will like to use it.

Thanks Cyberek,

The News Dec. 2012 template seems to have the same layout for both Joomla 2.5 and Joomla 3.x. So, I suppose the override.css will work with it too?.

How do I achieve the following:

* Make all article text black and size 12

* Reduce article title (in article page) to H@. They are just too large.

* Not use UPPERCASE, except as specified, for Menu List, Category/Module Headings. This is critical for science or technical websites where use of upper or lower case means different things, e.g., NaCl, ERMC, POV, iPhone; for concentrations: "M" means molarity, "m" means molality, etc.

* Reduce spacing between lines within a paragraph or sentence

* Reduce spacing between lines within a sentence, and between listed articles, i, e.g., "Most Popular", "Latest" lists, etc.

* Remove indent icons in list module

I may have more later.

Cornelio

I'm not quite sure what do You mean with "News Dec. 2012" - is it version from December last year?

Could You post an url to your site - working on live project is always easier than doing it theoretically.

I'm not quite sure what do You mean with "News Dec. 2012" - is it version from December last year?

Could You post an url to your site - working on live project is always easier than doing it theoretically.

Hi Cyberek,
Here's the website:

ERMC


How do I achieve the following:

* Make all article text black and size 12
* Reduce article title (in article page) to H@. They are just too large.
* Not use UPPERCASE, except as specified, for Menu List, Category/Module Headings. This is critical for science or technical websites where use of upper or lower case means different things, e.g., NaCl, ERMC, POV, iPhone; for concentrations: "M" means molarity, "m" means molality, etc.
* Reduce spacing between lines within a paragraph or sentence
* Reduce spacing between lines within a sentence, and between listed articles, i, e.g., "Most Popular", "Latest" lists, etc.
* Remove indent icons in list module

I may have more later.

I have already installed the Joomla 3.x of the same template. I want to make the CSS changes before I transfer the files to the new website.

Cornelio

A lot of things to do, but lets start:

all the code goes to /templates/gk_news/css/override.css and add at its end (remember to enable "CSS override" in template settings - advanced section.)

To make all articles text black and 12px size (on homepage):

Code: Select all

.nspArt p.nspText {color: #000; font-size: 12px;}


(if You would like to do same also for single articles please write back)

Single article header size:

Code: Select all

article header h1, .category header, article header h2 {font-size: 20px; line-height: 20px;}


change the numbers to your liking.

Not use uppercase - please be more specific on which elements.

Reducing line spacing in all paragraphs on page:

Code: Select all

p {margin: 0.5em 0 0.5em;}


(this margin is in kind of percentage of font size, so if font size is 10px this will add 5px margin on top and bottom of each paragraph. Remember, that two paragraphs each after another will have only 5px margin even, when each of them has top and bottom margin 5px - they stack)

Remove indent icons in list module
- please show me exact element where I can see what You mean.

Thanks Cyberek,



The demo site is still

ERMC

*The headline size reduction worked.

*No UPPERCASE
If you view the ERMC, I was able to achieve this in many module titles and Menu lists by deleting

Code: Select all

text-transform: uppercase;

in the template.css However, it did not work for these:

*Main Menu List at the top
*The Titles of the categories in the "Slider Module" just below the headline module, see ERMC

I was able to achieve this for the "Main Menu list" in an old Joomla 1.5(?)

Kalikasan Philippines.

From a previous post, one of the moderator indicated that this was due to the use of the FONT STYLE

"Bebas Neue"

not supporting lowercase. He never indicated what CSS file it was located in, so it was very frustrating.

The other changes you suggested have mixed bag results. For example, the "black text" worked in some of the homepage modules, but not in others -- see ERMC. I will create a separate post for this.

Cornelio

I'm not quite sure what do You mean with "News Dec. 2012" - is it version from December last year?

Could You post an url to your site - working on live project is always easier than doing it theoretically.

Hi Cyberek,
Here's the website:

ERMC


How do I achieve the following:

* Make all article text black and size 12
* Reduce article title (in article page) to H@. They are just too large.
* Not use UPPERCASE, except as specified, for Menu List, Category/Module Headings. This is critical for science or technical websites where use of upper or lower case means different things, e.g., NaCl, ERMC, POV, iPhone; for concentrations: "M" means molarity, "m" means molality, etc.
* Reduce spacing between lines within a paragraph or sentence
* Reduce spacing between lines within a sentence, and between listed articles, i, e.g., "Most Popular", "Latest" lists, etc.
* Remove indent icons in list module

I may have more later.

I have already installed the Joomla 3.x of the same template. I want to make the CSS changes before I transfer the files to the new website.

Cornelio

Hi Cyberek,

*No UPPERCASE For Menu List, Category Headings, Module Titles, etc.

I was able to solve this issue by removing

Code: Select all

text-transform: uppercase;

in the

template.css
gk.stuff.css
joomla.css
menu.css

Thus, the main issues left now are

*Transformation of the gray text to black text
-- in the homepage
-- article page


*Line spacing within a paragraph NOT between paragraphs

What I meant by this is if you have a paragraph text:

These prospects enticed some bidders to shoulder more financial responsibility than they could bear. The Benpres Group, the Filipino partner of Maynilad, was in a desperate financial situation when it entered the contract, providing little cushion for the first difficult years when much more equity was needed than anticipated. According to a study by the British NGO, WaterAid, both companies "appeared to have made particularly low bids, on poor foundations, with the assumption they would change the terms of the contract once it was won." This has been vehemently denied by Lyonnaise des Eaux. It emphasized that its bid was much higher than the exteremely low bid submitted by Ayala, and that its bid was very close to the two other bids.

How do you make the line spacing in the sentences WITHIN the paragraph closer to each other?

I understand your point about the spacing BETWEEN two paragraphs:

Code: Select all

p {margin: 0.5em 0 0.5em;}

Instead of using "em" can it be express in "px" as absolute values

Code: Select all

p {margin: 15px 5px 10px 5px;}

for:

Space Top= 15px
Paragraph 01
Space Bottom= 10px

Space Top= 15px
Paragraph 02
Space Bottom= 10px

The left and right margins are both 5px

Alternatively, how can the

Code: Select all

p {margin: 15px 5px 10px 5px;}

be written so that it will define only the TOP an BOTTOM margins?

Cornelio

Ill try to split answer into few posts for better readability.

text-transform: uppercase
removing it from multiple core css file is not most elegant way. If You ever upgrade template, all changes will be lost. I would suggest to use override.css instead and force menu item to look normal this way:

Code: Select all

.gkMenu > ul > li > a, #gkTopMenu li, .box .header, .box.advertisement .header,
.bigtitle .header, #gkLogo.text, #gkLogo.text .gkLogoSlogan, .box.vertical .header, .gkTabsWrap.vertical ol li, .nsphover .nspInfo2, section > header div p, th, .pane-sliders .panel h3, .article-index h3, dl#tabs dt.tabs span h3, dl.tabs dt.tabs span h3, .gkMenu > ul div.childcontent header a {text-transform: none;}


You could add this even now, without reverting original core files, so after upgrade this change will still works.
Ps - I hope I haven't missed anything, but its just a list of selectors from all loaded .css files that have text-transform set to uppercase)

Padding stuff.
It is exactly as You have mentioned:

Code: Select all

p {padding: 5px 10px 15px 20px;}


would set top padding to 5px, right to 10px, bottom to 15px and left 20px (it works same with margin, borders and other elements that can be set to any of those 4 directions).
The difference between margin and padding is padding will always sume up (so 2 paragraphs that have top and bottom padding set to 10px will have 20 px space between), and margin overlap each other (suppose paragraph has top margin 10px and bottom 15px, then space will have 15px as they will overlap).

You can simplify this to:

Code: Select all

p {margin: 10px 20px}


which will set top and bottom margin to 10px, left and right to 20px (same with padding, borders etc)
or even more:

Code: Select all

p {margin: 10px}


set all to 10px.

If You would like to modify only one side, use:

Code: Select all

p {margin-top: 10px}


and replace top with right, bottom or left to set specific direction margin (padding, border etc).

We are almost there

Now "the rest" - line spacing:

Code: Select all

.box {line-height: 1.2;}


will do better (its in % of line height like with em).
If they are any elements missing that have old line height, please point them to me.

Transform all the rest text to black:

Code: Select all

.nspArt p.nspInfo, .bigtitle .header, .gkTabsWrap.vertical ol li, .box, body {color: #000;}


I hope I have found all of them.

If You are planning to develop more in css, Chrome Developer Tools or FireFox Firebug would be great tools for You. Finding correct classes to fix requires just one right click and finding correct declaration changing color or something else, then just copying it to override.css with only line You would like to change and modifying it.

PS - there is also a great tool for chrome called stylebot, that allows You to create and save styles for specific site, so You can easy live test, if Your declarations works with all subpages. Firebug/Chrome developer tools allows You also to edit css declarations, but after reload those changes are gone, while in stylebot they still remain when You save them (Edit Css at the bottom is the button You are searching for)

Thanks very much Cyberek.

We're getting there as you stated. I will have more clarifications, I am sure, in the future.

However, it is in a format now that allows me to transform the Demo into an actual site. Essentially, consolidating contents in a number of older websites. So, I will spend some time on that.

I am glad I came back to Gavick. The support here has gotten better since I came back. More Moderators, I guess, who really know their stuff.

I have always liked the Gavick template design. But for awhile in 2008, Gavick did not have the "News Magazine" templates that I want.

At the time in 2007, I like the Teline News-Magazine template of Joomlart. So, I have invested so much effort on it. After the second version though, it got so bloated that the latest versions took forever to load the page.

What tipped the balance was when they decided not to upgrade the Teline II version to Joomla 2.5. I would not have minded to move to the latest version of the Teline series, but there were so many features that just do not work. Then, when I ask for support, a number of the questions asked by members were never answered.

I have used some of the Gavick World News Magazine templates but never did get a chance to really move my main sites to it.

With Joomla 3.x around, I decided to make the change. What clinched it also is the "Lifetime Membership". I only use one to two templates. And then, just modify the one I chose.

Cornelio

Padding stuff.
It is exactly as You have mentioned:

Code: Select all

p {padding: 5px 10px 15px 20px;}


would set top padding to 5px, right to 10px, bottom to 15px and left 20px (it works same with margin, borders and other elements that can be set to any of those 4 directions).
The difference between margin and padding is padding will always sume up (so 2 paragraphs that have top and bottom padding set to 10px will have 20 px space between), and margin overlap each other (suppose paragraph has top margin 10px and bottom 15px, then space will have 15px as they will overlap).

You can simplify this to:

Code: Select all

p {margin: 10px 20px}


which will set top and bottom margin to 10px, left and right to 20px (same with padding, borders etc)
or even more:

Code: Select all

p {margin: 10px}


set all to 10px.

If You would like to modify only one side, use:

Code: Select all

p {margin-top: 10px}


and replace top with right, bottom or left to set specific direction margin (padding, border etc).

Thanks very much Cyberek.

We're getting there as you stated. I will have more clarifications, I am sure, in the future.

However, it is in a format now that allows me to transform the Demo into an actual site. Essentially, consolidating contents in a number of older websites. So, I will spend some time on that.

I am glad I came back to Gavick. The support here has gotten better since I came back. More Moderators, I guess, who really know their stuff.

I have always liked the Gavick template design. But for awhile in 2008, Gavick did not have the "News Magazine" templates that I want.

At the time in 2007, I like the Teline News-Magazine template of Joomlart. So, I have invested so much effort on it. After the second version though, it got so bloated that the latest versions took forever to load the page.

What tipped the balance was when they decided not to upgrade the Teline II version to Joomla 2.5. I would not have minded to move to the latest version of the Teline series, but there were so many features that just do not work. Then, when I ask for support, a number of the questions asked by members were never answered.

I have used some of the Gavick World News Magazine templates but never did get a chance to really move my main sites to it.

With Joomla 3.x around, I decided to make the change. What clinched it also is the "Lifetime Membership". I only use one to two templates. And then, just modify the one I chose.

Cornelio

Padding stuff.
It is exactly as You have mentioned:

Code: Select all

p {padding: 5px 10px 15px 20px;}


would set top padding to 5px, right to 10px, bottom to 15px and left 20px (it works same with margin, borders and other elements that can be set to any of those 4 directions).
The difference between margin and padding is padding will always sume up (so 2 paragraphs that have top and bottom padding set to 10px will have 20 px space between), and margin overlap each other (suppose paragraph has top margin 10px and bottom 15px, then space will have 15px as they will overlap).

You can simplify this to:

Code: Select all

p {margin: 10px 20px}


which will set top and bottom margin to 10px, left and right to 20px (same with padding, borders etc)
or even more:

Code: Select all

p {margin: 10px}


set all to 10px.

If You would like to modify only one side, use:

Code: Select all

p {margin-top: 10px}


and replace top with right, bottom or left to set specific direction margin (padding, border etc).

Thanks.
Its nice to read those kind of things and to know, that our help and work is appreciated. We do our best to help our users.
If You will have any problems in future, please write on forum - me, or any of other moderators will happily help you .