News:

Dear forum visitors, if the support forum is not available, please try again a few minutes later. Thanks!

Main Menu
Support-Forum

Changing Button Color/Style

Started by ibscas, 15.12.2018 16:58:16

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

ibscas

I want to pull the plugin into my design, which differs greatly from the stock design but am having some problems.

In my case, taking the Download Details as an example, when I look at the layout of that page I see:


<div class="jd_header" style ="border: 0px none;">
        <div class="jd_title_left"><h4>{file_pic} {file_title} {pic_is_new} {pic_is_hot} {pic_is_updated}</h4></div>
        <div class="jd_title_right  jd_download_url_position" style="">{url_download}</div>
        <div class="jd_title_right">{featured_pic}</div>
    </div>
    <div class="jd_clear"></div>
    <div class="jd_tags" style="">{tags}</div>


I don't see anywhere in there that it defines the "theme" as orange or red or blue or any of the other colors in CSS, however it inserts this into  the final page:

<div class="jd_header" style="border: 0px none;">
        <div class="jd_title_left"><h4><img src="images/jdownloads/fileimages/png.png" style="text-align:top;border:0px;" width="32" height="32" alt="Guild Screenshot Template - Photoshop"> Screenshot Template - Photoshop  <span class="jdbutton jorange jstatus">NEW</span>  </h4></div>
        <div class="jd_title_right  jd_download_url_position" style=""><a href="/index.php/downloads/summary/11-screenshots/4-screenshot-template-photoshop" class="jdbutton jorange ">Download</a></div>
        <div class="jd_title_right"></div>
    </div>


My issue is that I don't want the orange button but it's class is injected anyway.  The {} field puts in the class names of class="jdbutton jorange " so I have no control over that.  My only option would be, right now, to create a custom CSS the overwrites every single style created in the main CSS and then have my own classes.

So my question is, and I think I've looked all over the plugin, is where do you define the default 'style' that the pages have?  I don't want them to be orange - or any color for that matter other than the exact color and styles that match my site.  If it was coded into the HTML I would completely understand and know what needs done, but since they are injected via the special {} keyword I have no control it would seem.

I have tried a simple 'jorage {" CSS definition in the CSS file but it seems that the order of the custom file must not be last since no matter what I put into that CSS class I don't see the chances reflected.  I'm not sure why the {} fields also inject custom classes but that seems out of my control without modifying the code.


What's funny is that I, as a test, totally cleared everything in the jdownloads_buttons.css file and it STILL came out orange :).

 Thank you!
  •  

ColinM

Hi
The default button colour for the Download Button and others is set in the jd Config - Pictures tab.  Specifically in the CSS Button settings section,  field "Select css DOWNLOAD Button Colour".  There are a range of colours.  If none of these suit then the most appropriate scheme is to add the desired 'color' into the jDownloads Custom css file.  If you change the jD buttons css file it may well get overwritten at a later time.
Also please do not be tempted to use icon images as in the next major release (jd3.9) only the css buttons are supported!!
The css for the jorange class is below.  Note the options to select different colours for the hover an acive mouse positions are currently commented out as is some of the older gradient options.This whole css code block could be copied into the jDownloads custom css file.  Leave the class as jorange but change the actual colous codes to what you want.  Because the custom class is loaded last then it will override the other definitions.
Hope I have made it a bit clearer but ask again for more help
Colin

/* orange  This has various other options commented out in case needed later */
.jorange {
    color: #fef4e9 !important;
    border: solid 1px #da7c0c;
    background: #f78d1d;
/*    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);  */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    background: linear-gradient(#faa51a,  #f47a20);
}
/* .jorange:hover {
    background: #f47c20 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    background: linear-gradient(#f88e11,  #f06015);
}
.jorange:active {
    color: #fcd3a5 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
    background: linear-gradient(#f47a20,  #faa51a);
} */

Colin M
  •  

ibscas

Colin,

Thanks so much for replying!  I don't think I expressed my issue properly though :(.  I understand the CSS and the fact that there is only one CSS that will not be potentially overwritten on an update, the issue I have is that CSS aside, this code in the template<div class="jd_title_right  jd_download_url_position" style="">{url_download}</div>  gets the 'orange' added to only field placeholder.  So: {url_download} becomes <a href="/index.php/downloads/summary/11-screenshots/4-screenshot-template-photoshop" class="jdbutton jorange ">Download</a> So the class jorange is embedded into the placeholder without any further control from me.  I had thought that perhaps since the CSS also stated that there was a jred and jblue, etc, that maybe there was a place where that theme could be changed.  In order to fix this in the file that never gets overwritten by updates I would have to overwrite each CSS property of jorange so that they "reset" to a non-CSS version so I could then reformat them.  I may just be forced to remove the jorange from the button CSS altogether and just know that on each update I'll have to delete that.
  •  

Arno

When you want to change it completely you can use the override function.
You must then change small parts in this files (when you want to change it in all views):
- for the Download details: /components/com_jdownloads/views/download/tmpl/default.php
- for the single Category: /components/com_jdownloads/views/category/tmpl/default.php- for the 'summary': /components/com_jdownloads/views/summary/tmpl/default.php
- for the 'all Downloads': /components/com_jdownloads/views/downloads/tmpl/default.php...
Best Regards / Gruß
Arno
Please make a Donation for jDownloads and/or write a review on the Joomla! Extensions directory!
  •  

ColinM

Hi
There is a selection of colours!
QuoteThe default button colour for the Download Button and others is set in the jd Config - Pictures tab.  Specifically in the CSS Button settings section,  field "Select css DOWNLOAD Button Colour".  There are a range of colours.  If none of these suit then the most appropriate scheme is to add the desired 'color' into the jDownloads Custom css file.
So if you want say purple then put  say the code for orange in the Custom css but change the actual colour codes to a purple type. Then select orange where you want purple in the config
This may not be the nicest way but it is ractical and will work without too much effort
Colin
Colin M
  •