Users running a non-download version of Vanilla (pulled from github), on branch release/2019.016 or master from the last 2 weeks should upgrade to release/2019.017 or latest master for security reasons. Downloaded official open sources releases are not affected.

Changing the "LightBox" & "Icons/Sprites" colors in new custom dark theme???

hardwiredhardwired New
edited August 15 in Feedback

Installed Vanilla v2.1 for ProxyConnect project & made custom dark theme... need changing these elements.

Any input/feedback is appreciated.

The lightbox & icons code/files location is completely eluding me.

«1

Comments

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    The location isn't relevant since you shouldn't change files directly. Copy the theme you like to change and work with the copy. YOu can then save your own icon set in your own themes folder and change the css of your theme accordingly.

    I think most of the icons in Vanilla are sprites, if that helps you understanding what is going on.


    clever
  • "The location isn't relevant since you shouldn't change files directly"

    hmmm so in other words you have no clue...

    will search through some various themes css code for hints/clues if decide staying with Vanilla

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... Moderator

    If you decide to stay with Vanilla, and think you might need help, you'd do well not to be snippy and rude to one of the most helpful and knowledgable volunteers on this forum.

    If you didn't understand the response (which was exactly the right one), try asking politely for clarification.

    Kaspar
  • hardwiredhardwired New
    edited August 17

    It was an obvious "official" response for staying away from any core changes.

    yet not really "helpful" in any way... thus my response wasn't actually "snippy/rude" yet looking for better info/response...

    The core location is relevant for making duplicate/copy of the Sprite s for modifications in custom Theme folder.

    BTW The "LiteBox" modifications usually require editing the installs core files.

    My response for his response was an attempt extracting more useful info.

  • The core "Sprites", have a location.

  • hardwiredhardwired New
    edited August 17

    Hmmmmmmmmmmmmmmmmmm

    & where are they located...

    They are actually hosted via URL on vanilla main servers???

  • more located via CSS url link for vanilla servers...

  • Why are the core sprites and potentially other files hosted via core css url links???

    So if the Vanilla server goes down that potentially basically disables them for your average install.

    What other files are also that way in Vanilla???

  • /applications/dashboard/design/images/

  • /applications/dashboard/design/images/ is the actual answer for my question

  • Now does anyone here have experience with editing the "javabox" css?

  • hardwiredhardwired New
    edited August 17

    BTW:Always make duplicate saved local folder of your original core files before performing any "CORE" modifications...

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    BTW: never touch core files if not somebody who knows Vanilla for quite a little while tells you, that there is no alternative.

    If anyone asks "I have a ridiculous inefficient approach for a problem, can somebody advice?", I will answer "you would have to do this and that, but you beter should do it like that...". But if someone asks "which file do I need to change" I will always reply "Welcome to the wonderful world of Vanilla where you can change everything without changng any core files!"

    Can you give a screenshot of what you mean with "javabox css"?


    Kaspar
  • hardwiredhardwired New
    edited August 20
  • has various names... such as fancybox or colorbox... what is it on Vanilla?

  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

    Modal dialogue

    The html is loaded with ajax and it doesn't differ much from other forms. If you want to "change" it, I guess you only want to style it differently and not change the behaviour?

    If you start moving a discussion, a modal dialogue like that will be shown:

    <div class="Overlay" style="height: 2793px;">
       <div id="Popup" class="Popup" style="top: 230.5px; left: 0px;">
           <div class="Border">
               <div class="Body" style="max-height: 212px; overflow-y: auto;">
                   <div class="Content" style="display: block;">
                       <h1>Confirm</h1>
                       <form method="post" action="/moderation/confirmdiscussionmoves?discussionid=1">
                           <div>
                               <input type="hidden" id="Form_TransientKey" name="TransientKey" value=""><input type="hidden" id="Form_hpt" name="hpt" value="" style="display: none;">
                               <p>You are about to move 1 discussion.</p>
                               <ul>
                                   <li>
                                       <p></p>
                                       <div class="Category"><label for="Form_CategoryID">Category</label>
                                           <select id="Form_CategoryID" name="CategoryID" discussiontype="stub" class="">
    <option value="">Select a category...</option><option value="1" selected="selected">General</option>
    </select></div>
                                       <p></p>
                                   </li>
                                   <li>
                                       <p><label for="Form_RedirectLink" class="CheckBoxLabel"><input type="hidden" name="Checkboxes[]" value="RedirectLink"><input type="checkbox" id="Form_RedirectLink" name="RedirectLink" value="1" class=""> Leave a redirect link.</label></p>
                                   </li>
                               </ul>
                               <div class="Buttons"><input type="submit" id="Form_Move" name="Move" class="Button" value="Move">
                               </div>
                           </div>
                       </form>
                   </div>
                   <div class="Footer" style="display: block;"> <a href="#" class="Close"><span>×</span></a> </div>
               </div>
           </div>
       </div>
    </div>
    

    When taking about the style, you should take a look at the CSSEdit plugin. You might not necessarily need a theme of your own. The above should give a good start for beginning to change the style.


    hardwired
  • CSS edit plugin & HTML edit plugin is installed...

    yet no clue at this moment for CSS styling syntax of those specific values...

    the background of those boxes need being altered for something such as #111111 for the white font can be read w/ theme

    thanks for response... let me contemplate all this new data

  • hardwiredhardwired New
    edited August 20

    That box "popup" occurs when selecting delete comment...

  • Try it out with another theme?

    Just for testing

  • Made it readable using some code from "HeavyMetal"

    div.Popup h1,div.Popup h2 {

     filter: 


    progid:DXImageTransform.Microsoft.gradient(startColorstr=#8b0000,


    endColorstr=#000000);

     background:#8b0000;

     background: -webkit-gradient(linear, left top, left bottom,


    from(#8b0000), to(#000000)) !important;

     background: -moz-linear-gradient(top, #8b0000, #000000)


    !important;

     color: #FFFFFF !important;border:none!important;

     border-radius: 10;

     -webkit-border-radius: 0;

     -moz-border-radius: 0;

     text-shadow: 2px 2px 5px #000000;font-size:16pt;

    }


    div.Popup,.PanelInfo .Active a {

    color:#000;

    }

    div.Popup div.Info {

    border: 0;

    color:#111;

    }


    looking for the background and border CSS code for modifying that popup box....

Sign In or Register to comment.