Solved

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

Posted on 2013-11-11
15
347 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
  • 2
  • +1
15 Comments
 
LVL 9

Expert Comment

by:WebDevEM
ID: 39639575
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 43

Expert Comment

by:Chris Stanyon
ID: 39639673
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
ID: 39639681
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Author Comment

by:Rowby Goren
ID: 39639704
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 43

Expert Comment

by:Chris Stanyon
ID: 39639724
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
ID: 39639867
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
ID: 39639920
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39639934
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 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39640057
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
ID: 39640285
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 43

Expert Comment

by:Chris Stanyon
ID: 39640362
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
ID: 39640385
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 43

Expert Comment

by:Chris Stanyon
ID: 39640401
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
ID: 39640643
Thanks everyone.  I'll be tweaking the colors but this is working nicely!

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39641547
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Phone Does Not Abide By CSS Breakpoint For Navigation Controls 6 42
Wordpress themes CSS? 6 40
CSS DIV Height in Percent 1 38
Popup write two lines 3 32
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!
This article discusses four methods for overlaying images in a container on a web page
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 …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

734 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