Solved

Unique Joomla front template page link color problem

Posted on 2014-01-30
7
456 Views
Last Modified: 2014-02-10
I have a website that uses Joomla for content management.  It was developed to have a unique front page outside of the rest of the content that is configurable within Joomla itself.  I am trying to make this front page have a slightly different color scheme than the rest of the site (completely black background instead of half black half silver).  The footer that is on each page includes a link to the sitemap which I would prefer to leave on the front page as well.  The problem is that I cannot independently change the black sitemap link, that shows up as desired (on the silver background) for the rest of the Joomla controlled site,  to be silver on the entirely black background of the unique front page.  I believe I should be able to create a div element and reference this element in the CSS to do just this but anything I try either has no effect or changes all links on the page, including a nav bar at the top of the page.  I don't know if I should maybe try to used the modules.php file I will include the relevant CSS and PHP code below.  The site itself is HERE

index.php:
<footer id="primary-footer" class="container">
	<jdoc:include type="modules" name="footer-navigation" style="navigation" />
</footer>

Open in new window


screen.css:
a:link, a:visited{color:#000;}
a:hover{text-decoration:underline;}

#primary-footer{padding-top:15px; text-align:center; margin-bottom:20px; }
#primary-footer .footer-nav{display:table; padding-top:15px; margin:0px auto; border-top:1px solid #aaa; }
#primary-footer .footer-nav ul{ width:120px; min-width: 700px;}
#primary-footer .footer-nav li{display:inline; margin-right:15px;}

Open in new window

0
Comment
Question by:uescjp
  • 3
  • 2
  • 2
7 Comments
 
LVL 50

Expert Comment

by:Steve Bink
ID: 39823427
In your CSS, line 141 is overriding line 138.  Both hit the same target.  The rule below has greater specificity than both.
.footer-nav ul li a:link {
    color: #FFFFFF;
}

Open in new window

0
 
LVL 28

Expert Comment

by:chilternPC
ID: 39831276
if you look at the code of the footer on the home page  - its the same as the code for the rest of the joomla site - so I suspect the home page is not independent of the active template. it uses the same id's and classes as the other pages.

Note - although you can't see the link on the home page - Google and other search bots can and will find it which is important part.

if you want a different style page on the home page - create a new template  with your colours, install it and  configure the home page to use that and the other pages to use the existing template
0
 

Author Comment

by:uescjp
ID: 39848111
@routinet: I have tried that and the changes does not seem to have any effect.  Adding the ids of #home and #primary-footer changes the footer on all pages but I only want it changed on the front homepage.

@chilternPC: As you said, I only care for my sake.  I do not want to make multiple templates and switch between them for the frontpage and inner pages.  If it is not possible to only effect the front page with CSS then I will leave it as it is.
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 28

Accepted Solution

by:
chilternPC earned 350 total points
ID: 39848188
looking further into it, if you have joomla 3 you can specify a style sheet
for that page.
create the page specific style sheet. and upload it to somewhere on the site you know.

go to admin and click on menu manager. open the menu and find the home page menu item
click on that.
then click on the tab item called "Page Display".
on this page there is an entry "Page Class"   here you can specify that page specific style sheet.
not tried this myself , but the help says this is for adding styles to individual pages.
0
 

Author Comment

by:uescjp
ID: 39848202
chilternPC: That is seeming like the only option.  If noone else has any suggestions in the next few days I'll accept it as the answer but I will likely not do that either as it may be more hassle than it is worth.

Thanks
0
 
LVL 50

Assisted Solution

by:Steve Bink
Steve Bink earned 150 total points
ID: 39848290
I believe chilternPC's suggestions is your only route.  You could always use a Joomla extension designed to add a custom style sheet to pages, but I consider that the long way around to adding a page-level class and targeting that instead.

One correction, though: the "Page Class" attribute adds a *class* to the body, not a style sheet.  This means you still need to place the rules in your template's style sheet.
0
 

Author Closing Comment

by:uescjp
ID: 39848297
Not what I was hoping for but I understand the limitations of the version of Joomla I am using.  Thanks.
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Change div area and length 1 26
Attach to file (img) a unique id 8 23
PHP Form Calculate Total Price 10 40
Eloquent ORM manual paginator defaults to simple 2 19
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now