Using a page-template (php) to change link colors

  • Hi All

    I am trying to create a set of page templates whereby the links on those pages are coloured differently from the rest of the site.

    I have successfully cloned the default page template, and inserted the modified template page name. This has been uploaded and is being accepted as a valid template file for all pages for the attribute side menu.

    I am also successfully able go to the Editor, and select the the page template for editing.

    My question is this: what code, and inserted where, is needed to override the default link colours?

    My code looks like this:

    <?php /* Template Name: Page - Calendar */ ?>
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="mh-wrapper clearfix">
	<div class="mh-main">
    	<div class="mh-content <?php mh_content_class(); ?>">
    		<?php mh_before_page_content(); ?>
				<?php get_template_part('content', 'page'); ?>
			<?php endwhile; ?>
				<?php get_template_part('comments', 'pages'); ?>
            <?php endif; ?>
        </div>
		<?php get_sidebar(); ?>
    </div>
    <?php mh_second_sb(); ?>
</div>
<?php get_footer(); ?>

Viewing 8 replies - 1 through 8 (of 8 total)

  • does the theme use body_class() in the body tag (in header.php?)
    https://codex.www.ads-software.com/Function_Reference/body_class

    if so, you would have a CSS class to base the formatting on.

    Thread Starter spiralsofdanu

    (@spiralsofdanu)

    Hi Michael
    I’m learning as I go here, so not sure what the body_clss is…. however this is the code in the Header.php

    <!DOCTYPE html>
<html class="no-js<?php mh_html_class(); ?>" <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title('|', true, 'right'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php if (is_active_sidebar('header')) { ?>
<aside class="header-widget">
	<?php dynamic_sidebar('header'); ?>
</aside>
<?php } ?>
<div class="mh-container">
<?php mh_before_header(); ?>
<header class="header-wrap">
	<?php if (has_nav_menu('header_nav')) { ?>
	<nav class="header-nav clearfix">
		<?php wp_nav_menu(array('theme_location' => 'header_nav', 'fallback_cb' => '')); ?>
	</nav>
	<?php } ?>
	<?php mh_logo(); ?>
	<nav class="main-nav clearfix">
		<?php wp_nav_menu(array('theme_location' => 'main_nav')); ?>
	</nav>
	<?php if (has_nav_menu('info_nav')) { ?>
	<nav class="info-nav clearfix">
		<?php wp_nav_menu(array('theme_location' => 'info_nav', 'fallback_cb' => '')); ?>
	</nav>
	<?php } ?>
</header>
<?php mh_after_header(); ?>

    yes, here it is: 

    <body <?php body_class(); ?>>

    page templates will inject a CSS class whihc refers to the template file name; https://codex.www.ads-software.com/Function_Reference/body_class#Page

    are you fairly familiar with CSS?

    what specific links are you trying to re-color?

    what theme are you using?
    if might be worthwhile to post the question in your theme’s forum if your theme is one of https://www.ads-software.com/themes/

    Thread Starter spiralsofdanu

    (@spiralsofdanu)

    Hi Michael

    In all honesty, I’m a newbie at CSS – I know what I need to know, at teach myself as I go along.

    I have tried to recolour the links using the page id function

    page-id-5983 a {
	color: black;
}

    But it didn’t work. I tried inserting it into the main theme (MH Twenty Twelve) Stylesheet and in the child, but to no avail. I also tried changing “black” to “#000000”, and that also had no effect.

    The default link colours are purple, and then red on hover over – which is fine for the rest of site, but we just want to change the purple to black on these specific pages.

    Any ideas?

    CSS classes need to be preceeded by a dot in CSS;

    try:

    .page-id-5983 a {
	color: black;
}

    the basics:
    for example https://www.w3schools.com/css/
    there are of course also other tutorials available online

    Thread Starter spiralsofdanu

    (@spiralsofdanu)

    Thanks Michael.
    Whist stylesheet do you think I should put this in?
    The parent theme or the child?
    And whereabouts?

    Cheers

    formatting edits definitively belong into the child theme’s stylesheet – the parent theme has to reamin totally unedited.

    alternatively, you can try and use a ‘custom CSS’ plugin to add new styles.
    https://www.ads-software.com/plugins/search.php?q=custom+css

    Thread Starter spiralsofdanu

    (@spiralsofdanu)

    Thanks Michael… but unfortunately none of that worked.

    I tried that script in the child CSS and it didn’t work, and then I tried to use a Custom CSS plugin
    (https://www.ads-software.com/plugins/simple-custom-css/)

    And that didn’t work either.

    I’m thinking that maybe something is up that I can’t override these rules.
    Any ideas where I would start looking?

    I’ve had a look in the “Pagination”

    /***** Pagination *****/

.post .pagination { padding-bottom: 20px; padding-bottom: 1.25rem; }
.page-numbers { padding: 5px 10px; padding: 0.3125rem 0.625rem; background: #eee; display: inline-block; }
.page-numbers:hover, .current, a:hover .pagelink { background: #e64946; color: #fff; text-decoration: none; }
.page-numbers a { display: block; }
.pagelink { padding: 5px 10px; padding: 0.3125rem 0.625rem; background: #e64946; color: #fff; }
a .pagelink { background: #eee; color: #444; }
.post-nav a { font-size: 15px; font-size: 0.9375rem; font-weight: 700; }
.post-nav a:hover { text-decoration: none; }

    I can’t help but feel I’m missing something obvious…

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Using a page-template (php) to change link colors’ is closed to new replies.