Solved

Without changing the html, can I change the background color...

Posted on 2013-11-11
15
338 Views
Last Modified: 2013-11-12
Hello

Please look at this development page dev page - calendar issue.

Look at the calendar on the right.  Specifically November 13.

I would like to change the background color of certain calendar dates, without having to modify the underlying html (which is generated by a component that I can't change).

If possible, whenever a class extcal_busylink is inside a td class extcal_daycell, I would want the td class extcal_daycell to be a different background color.

For testing, let's make that background color yellow.

For example it would look like November 11 but with a yellow background.  November 11, however is a td class named extcal_todaycell.

As I write this question I think it is indeed possible, since similar coloring was done for November 11.

Looking forward to hopefully a solution!

Thanks

Rowby
0
Comment
Question by:Rowby Goren
  • 7
  • 5
  • 2
  • +1
15 Comments
 
LVL 9

Expert Comment

by:WebDevEM
Comment Utility
Hi,

It sure is possible, assuming you have access to either a CSS file or the page itself.  (Basically someplace where you can add some CSS code.)

If you add the following CSS, it will look for any  .extcal_busylink inside a td.extcal_daycell and give it a background color.
td.extcal_daycell .extcal_busylink
{
   background-color: yellow;
}

Open in new window


Hope this helps!  If you have problems getting it working, let me know.

WebDevEM
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Using CSS, it can't be done. The solution posted by WebDevEM will style the extcal_busylink, but not the parent TD.

Your only really option here is to use javascript to do it. Here's a jQuery method.

$('td.extcal_daycell .extcal_busylink').parents('td.extcal_daycell').css('background-color', 'yellow');

Open in new window

There was talk of introducing a parent selector in CSS3 and a couple of the browsers implemented it, but it's not been accepted as part of the CSS3 spec.
0
 
LVL 9

Expert Comment

by:WebDevEM
Comment Utility
Ahh, I mis-read the question slightly... Missed the fact that he wants the parent TD colored, not just the inner busylink.  My apologies!

ChrisStanyon is correct - that can only be done with javascript (or jQuery, or whatever other library you use)
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
Hi

Thanks for the comments.  I was wondering if a parent could be handled via css.

Where would I put this:  $('td.extcal_daycell .extcal_busylink').parents('td.extcal_daycell').css('background-color', 'yellow');
                                           
....in the css, or the head of the page, or via an external file?

I think joomla does handle jQuery.

Rowby
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
It needs to go in a jQuery document.ready block - usually in the HEAD of your document. Your Joomla installation may already have that in place, so you just need to add it.
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
Hi

Here's what is currently in the  Joomla template's header.  Do you see a place where I can put the code.  Or do I need to insert it in some additional code.

(I see this link "http://stackoverflow.com/questions/16782036/script-inclusion-in-joomla-3"]joomla jquery

<head>
    <jdoc:include type="head" />
    <?php if ($this->params->get('usebootstrap','')) { ?>
        <?php JHtml::_('bootstrap.framework'); ?>
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/bootstrap.css" type="text/css" />
        <?php JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction); ?>
    <?php } ?>
    <?php if ($this->direction == 'rtl') { ?>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/default_rtl.css" type="text/css" />
                <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_rtl.css" type="text/css" />
    <?php } else { ?>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/default.css" type="text/css" />
                <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
  <?php } ?>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/fonts/fonts.css" type="text/css" />
    <?php if ($this->params->get('useresponsive','1')) { ?>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/mobile.css" type="text/css" />
    <?php } ?>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/custom.css" type="text/css" />
    <?php if ($this->params->get('usecsspie','1')) { ?><!--[if lte IE 8]>
    <style type="text/css">
    #main > div.inner { behavior: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/pie.htc) }
    </style>
    <![endif]--><?php } ?>
<?php
$mainclass = "";
if (!$this->countModules('position-7')) { $mainclass .= " noleft";}
if (!$this->countModules('positionright')) { $mainclass .= " noright";}
$mainclass = trim($mainclass); ?>

                                            
</head>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
You could do it with CSS, but you would need to rejig what you have slightly but since you are using jQuery it would probably be easier to just use it.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
Hi

I found this better link re using Jquery in Joomla using jquery in joomla

This I assume the recommended way to do is is per the following snippet from the above link?


You could try using the following to include the JS file which is Joomla coding standards:

JHtml::_('script', JUri::root() . 'templates/vcoretemplate/js/div_scroller.js');

Do I just create a file, per the above instructions, with this inside it -- or do I need additional code:

$('td.extcal_daycell .extcal_busylink').parents('td.extcal_daycell').css('background-color', 'yellow');
                         

Open in new window

0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
It looks like your site is already using jQuery, so you could create a file with the following content:

jQuery(document).ready(function($) {
   $('td.extcal_daycell .extcal_busylink').parents('td.extcal_daycell').css('background-color', 'yellow');
});

Open in new window

Another option, instead of defining the background-color in the jQuery, just use the jQuery to add a class to the TD and then style it in your CSS file. Instead of the above, use this:

jQuery(document).ready(function($) {
   $('td.extcal_daycell .extcal_busylink').parents('td.extcal_daycell').addClass('activeCalDay');
});

Open in new window

That will add a class of activeCalDay to your TD and then style it in your CSS file:

.activeCalDay { background-color: yellow; }

I know you're editing 2 files, but this way you're keeping your CSS in the CSS file - make future updates a little easier.
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
Hi  

I created a file called rowbycalendar.js and in that file is the following:

 jQuery(document).ready(function($) {
   $('td.extcal_daycell .extcal_busylink').parents('td.extcal_daycell').addClass('activeCalDay');
});

Open in new window

                                           
I put this in the head of the joomla template, right before </head>:
<?php JHtml::_('script', JUri::root() . 'templates/templates/hasonrevised/js/rowbycalendar.js'); ?>

Open in new window


And added this to the bottom of the css:  
.activeCalDay { background-color: yellow; }

However I am not seeing any results.

1)  Did I do it right?  Right syntax?
2)  How can I see that jquery is indeed enabled and that its "settings" (whatever that is) are working.

I am going to turn joomla debugging on.  See if that helps.

Rowby
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
You're getting a 404 error for your script. You seem to have set the path wrong - there should only be one templates folder. This is wrong:

templates/templates/hasonrevised/js/rowbycalendar.js

It should be:

/templates/hasonrevised/js/rowbycalendar.js
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
Fixed the link and.................................

It's working !!!


One final adjustment.  can you give me a 1 pixel border around it.  Red for now. Ugly but I will redo it later.

Rowby
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Sure. The thing with adding the border is that you already have a line in your CSS that sets the border to none, and it's used with the !important keyword. To override this with a red border, you'll need to make sure your rule has a greater specificity than the other rule. You need to change your new CSS rule to the following:

#extcal_minical table td.activeCalDay {
   background-color: yellow;
   border: 1px solid red !important;
}

Open in new window

0
 
LVL 9

Author Closing Comment

by:Rowby Goren
Comment Utility
Thanks everyone.  I'll be tweaking the colors but this is working nicely!

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
Hello all, there's an update to this question at Updated EE question

Looking forward to your suggestions -- if you have time!

Thanks

Rowby
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

772 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

13 Experts available now in Live!

Get 1:1 Help Now