One CSS to Rule Them All

Discussion in 'Cascading Style Sheets' started by Kirsten Bolda, Dec 15, 2015.

Tags:
  1. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    Got stuck again today ...

    upload_2015-12-14_23-52-52.png

    I was diggin' those box shadows, until they started taking over. They were everywhere!

    And yet, removing them at the .section level got rid of all of them. Flat is not what I am going for. I want Holly's new forum to float right off the screen ...

    What I needed was a new CSS rule. But how to create one? How would the mighty XenForo know what element I meant to override?
    Enter the + button. See it there? Perched smugly above the rest of the CSS rules, daring me to give it a try?

    upload_2015-12-14_23-58-33.png

    The nice thing about CSS is that you get lots of chances to get it wrong before you get it right, so I tried it, and look what appeared! A class! But where was this class? Not in the templates. Dare I enter it as a new one?

    If CSS had a WalMart, a one stop shop where you can buy socks, saran wrap, and spaghetti, they might call it Extra CSS.
    So that's where I put my new class.

    upload_2015-12-15_0-0-49.png

    And, omigosh, it worked!
    It feels a bit like cheating, because wouldn't the fellas at XF create a class if they felt one was needed? I don't know, but it sure is nice to know I have more control over those boxes than I ever did before. :D:cool::p
     

    Attached Files:

  2. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    And, arrgh. Look what happened to the discussion forums!
    Will try again tomorrow ...
     
  3. Dan Allen

    Dan Allen Administrator Founder Not Banned Radio Button Problem - Leader

    I think you should run this question by the crew at HQ. I mean it. I think this is a great opener for you there. You are going to be super popular there. You really should take advantage of that, because our isolation is our biggest vulnerability. Being active at XF HQ is strategic for us, especially if we buy into OOP programming as our standard. My bet is we will.
     
  4. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    This is a great idea. The mods seem helpful there, and I can learn a lot from the other users there as well.
     
  5. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    Made some progress today, when I tried something new and added a rule. (Every time I think I've got it figured out something else jumps out at me that I messed up in the process though. )

    upload_2015-12-27_8-13-55.png

    Sure enough, a search revealed four templates with a subheader, and none were the navigationSideBar I was looking for. What if I went into navigationSideBar and added a rule?
    I was desperate, and I was in dev, so it was okay to try, I mean test, something.

    upload_2015-12-27_8-26-27.png

    And, omigosh, it worked!

    upload_2015-12-27_8-29-16.png

    Let's see if todays Eureka sticks ... :eek::rolleyes:
     
  6. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

  7. Dan Allen

    Dan Allen Administrator Founder Not Banned Radio Button Problem - Leader

    how can I keep my copy of the site in sync with these changes? How do we keep your copy in sync with changes I make? Do you know what we need to do to clear up the out of sync templates, which are referenced in an alert at the top of the forum admin home page
     
  8. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    That is a really good question since I have no way to know what changes you may have made in this (21C) version of Holly's forum versus mine.

    With the Houston Data styles I always exported the present version before I imported something from my dev version just to be safe in case there were changes from you. But with Holly's styles at 21C I was working exclusively here when my dev copy was down so I didn't make copies before starting my work.

    I will be more consistent about referencing the date (and time) of the style I have imported in the future. Another way to be sure I'm consistent would be to export the current version of Holly's forum at the beginning of each session and import it into my working copy, and then import any changes I have made back to Holly's forum when I am done, again with the date and time marked.

    I imported this morning's progress into this (21C) forum, after exporting the current version as a backup in case of changes I'm not aware of.
    upload_2015-12-27_14-58-6.png


    upload_2015-12-27_14-58-52.png

    I'm open to suggestions on how to do this better.
    I'm looking into the version inconsistencies.
     
  9. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    Wow, we each have a different version of XF. And every time we make changes that template warning goes up.

    Holly's Forum: Version 1.5.2

    upload_2015-12-27_15-44-44.png

    21C Forums: Version 1.5.0
    upload_2015-12-27_15-45-53.png

    My dev copy: Version 1.5.4

    upload_2015-12-27_15-47-29.png

    Thank you for bringing this to my attention. I seriously need to keep better notes on the changes I am making.


    I saw the outdated templates warning as well:

    upload_2015-12-27_15-49-31.png

    Looking behind the warning produces this screen:

    upload_2015-12-27_15-50-32.png

    What I don't understand is where version 1.5.1 came from, since none of our versions corresponds to that number. I'm thinking the custom version is from here because it is 1.5.0, and can be safely merged with the parent 1.5.1 version that currently resides in Holly's version 1.5.2.

    But what happens when they are merged? I have the same error on mine and will do some more testing later.
     
  10. Dan Allen

    Dan Allen Administrator Founder Not Banned Radio Button Problem - Leader

    Well, let's start with a new rollback point. You get to pick it, but it cannot be 21C, because 21C is not the same system. It can be either what Holly has live now or what you have in your copy (on your server) of Holly's forum. It must be one or the other, no other options. Whichever one you pick becomes the system of record. When you pick, that system has to be frozen, with no changes made, until I can clone it to the other location, either your server or Holly's, depending which you pick. At that point, your server and Holly's live forum will be exact duplicates of one another. What happens after that has to follow a strict rule, where changes are made first to your copy then applied to Holly's live forum. That way, Holly's and your copies stay in sync. The red line that is really bad to cross is to make changes to the live system before they have been made to the dev copy. The path taken by changes has to be a one-way road, starting in your dev copy then going to Holly's live edition. This is not always the fastest way, but it always nets out to being the fastest over time. Over time, you will see this for yourself, so I won't try explaining the various scenarios that let to that result. For this to work, the process of applying changes from dev to live has to be really efficient. As tech support to this development pipeline, that efficiency is my job. I cannot do that job if changes go into the live system before the dev copy. The first thing I am going to do once we have verified that your copy is in sync with live is delete the live copy and replace it with what you have on your server. That will prove the two systems are in sync and if they weren't, they will be then. I will have a copy of what is deleted from the live site, in case we have problems.
     
  11. Dan Allen

    Dan Allen Administrator Founder Not Banned Radio Button Problem - Leader

    I don't have any changes to apply to the forum until after we establish the pipeline from your server to Holly's. Later, when I changes have to apply, they are going to have to take the same route: apply them first to your copy with your prior knowledge, then apply the same changes to live, potentially by replacing live with your copy. This means you and I have to coordinate changes to your copy.
     
  12. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    This sounds like a good route to take. I would suggest using Holly's live forum as the system of record. I had already decided not to make any more changes at all to her system, because I realized how screwed up that could become. It works now, and if there are any small changes I want to make to the styles they will have to wait until we are back in sync.
    After that all changes will go into my cloned system first, and then if there are no problems there, into the live system.

    I have been considering uploading a few images for the styles at some point. I would log that as a change.

    Is there a protocol for logging these changes? What would be a good place to keep track of the updates we have done?
     
  13. Dan Allen

    Dan Allen Administrator Founder Not Banned Radio Button Problem - Leader

    loaded all the files in holly's forum into a zip file, called f.zip
    upload_2015-12-28_19-4-25.png

    Copied the zip to drops
    upload_2015-12-28_19-5-3.png


    Moved your copy of Holly's forum to a holding spot, in case we need it.
    upload_2015-12-28_19-6-11.png

    Recreated the directory for Holly's forum in drop20 and unzipped the copy from Holly's site
    upload_2015-12-28_19-7-0.png

    Changed the forum config to point the the database on your server holding copy of the forum DB from Holly's server
    upload_2015-12-28_19-8-12.png

    note: dev/xf database is named xenforo. It is unaffected by all this.

    Delete all the tables from your copy of Holly's DB
    upload_2015-12-28_19-9-26.png

    upload_2015-12-28_19-9-56.png


    database is empty
    upload_2015-12-28_19-10-22.png



    Make a copy of the DB at holly's site, copy it to your server.
    upload_2015-12-28_19-11-24.png

    Make a copy of your sandbox xf db, in case the it gets written to by accident. The reason is it has the same name as the DB we are loading from Holly's site, and some dumps will force writing to a db with the same name as where it came from. Not expected in this case, but to be extra careful...
    upload_2015-12-28_19-14-47.png

    load Holly's forum db to xf_hwc on your server:
    upload_2015-12-28_19-16-40.png

    Check to see if it matches what Holly's db shows:
    Your copy:
    upload_2015-12-28_19-17-13.png


    Holly's forum database (the small number of extra records are due to activity since making the copy, people posting.)

    upload_2015-12-28_19-18-0.png

    Here is your sandbox db by comparision
    upload_2015-12-28_19-20-39.png

    Your copy:
    upload_2015-12-28_19-22-20.png



    Holly's live forum DB
    upload_2015-12-28_19-23-19.png


    You now have a perfect copy of Holly's forum, except for new posts coming in.
    upload_2015-12-28_19-24-42.png

    Beware of hard links back to the live forum

    I would recommend doing something to the style on your copy to avoid mistakes, so it looks unmistakably different from live.
     
  14. Dan Allen

    Dan Allen Administrator Founder Not Banned Radio Button Problem - Leader

    Looking forward to seeing this note disappear.
    upload_2015-12-28_19-29-29.png
     
  15. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    I wanted to give you a heads up before I make a change to the cloned system, in anticipation of delivering the completed three XF styles to Holly.

    Once you acknowledge this message, I plan to add the background images to the styles directory, and then upload the new styles via the admin panel.
    upload_2016-1-3_14-42-42.png

    upload_2016-1-3_14-44-14.png

    Also, I noticed that my dev version of XF is in 1.5.4, while the clone and Holly's system are in 1.5.2. I suspect that could be the reason for those template error notices.

    upload_2016-1-3_14-47-5.png

    I will try to merge them in the clone system before applying them to Holly's system. :D
     
  16. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    I'm behind on posting some of my latest CSS exploits. But I was able to change some font colors on the member card without compromising the contrast messages on the front page and I wanted to note what I did for future reference.

    The problem looked like this: (this is from the style named Houston-Data 6.4)

    upload_2016-1-24_9-36-0.png
    Changing the color on the inline pairs however, produced an undesirable result on the forum lists:

    upload_2016-1-24_9-43-17.png





    The solution to this problem had eluded me for a while now, but thanks to some useful tricks I learned at Code School, I had some ideas on what to try.

    upload_2016-1-24_9-48-52.png

    All that was left was one more bit of text that came after 'kirsten was last seen' but I was so close to getting this right, I couldn't give up now. So I added an even more specific rule. (Stacking the classes to get more specific is the trick I learned at Code School.)

    upload_2016-1-24_9-51-31.png

    So now we can read what's on the member cards, and I have more confidence that I can make things look the way I want them too. :)


    Also, there is another discussion about adding a rule to a CSS class (link) under the thread Color Scheme for Houston Data that might be relevant to this topic.
     

    Attached Files:

  17. Dan Allen

    Dan Allen Administrator Founder Not Banned Radio Button Problem - Leader

    That is a good trick that will serve you for a long time.
     
  18. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    Leveling up some more on CSS.
    That log in page was a pain, especially because I had to log out each time I tested it. Arrggh. :Sour:
    But ... check this out:
    upload_2016-5-12_19-3-3.png


    upload_2016-5-12_19-4-47.png

    Sure enough, adding a rule, especially when links are involved, works!

    upload_2016-5-12_19-5-47.png

    I'd love to be at a point where I can change anything I want to in the CSS, and I think I'm getting close to that. :Joyful:
     
  19. Kirsten Bolda

    Kirsten Bolda Administrator Radio Button Problem - 2nd Demo Parts A and B Founder Not Banned

    That's great, but what if my a:link is for a whole section?

    upload_2016-5-21_22-30-25.png

    :(:Arghh: :Banghead:
     
  20. Dan Allen

    Dan Allen Administrator Founder Not Banned Radio Button Problem - Leader

    I have three answers for this.
    1. You absolutely justified in finding CSS selectors really hard to understand. The reason is answer number 2.
    2. "Well, have you read the spec?" People ask that as if anyone who has not done that is not qualified ask questions. You may have looked before, but here is the spec. I am sure there is a field of study that makes that spec useful, but for crying out loud! Just look at it!
    3. Changing the color of links seems to to always be a thorn. What I start trying in this case is to look for the id (best) or class already in place one level above the links you want to change. So I am looking and not sure what you are aiming at.
    Let's say you want to change only the link for "view all recent posts" and no others. In that case, you could put a class on the <a> tag, like this
    Code:
    <a class="new_class" href=....>
    
    Then add that class to extra.css give it a color and it might work. If it doesn't work, you have look through the inspector to determine if the class is even being seen. If you make a syntax error, the class will not show up anywhere in the right column that shows all the rules affecting the element that you click on in the left page, where the html is.

    If you don't find it, it means you entered css wrong in extra.css

    If it is there but is lower on the list than another style, so yours would have a strike through it, this is why i like to create override css, so I an always make mine the one that overrides whatever else is there., but there is another way. Basically you have to apply the rules of CSS selectors to get yours to be the one at the top. I don't know those rules well and it used to be constant agony. The worst was the for a long time, half the time css was wrong or the browsers didn't work. So it was really hard and it took a long time for me to trust it. Now I trust it.

    If you get to a point when your style is being cascaded over and you cannot figure out what to do, let me know and I try to help you figure it out.Please put too much time in without getting some help, there are few thing I know how to try that I can show you, it will be better if there is an example. Sitting here now I don't know how I could explain it.

    This is not your fault.

    Have you looked for a CSS forum?

    Or you could post the problem on Holly's thread for writers and programming. Show people what you are doing. It will be great publicity

    Or post it here and then post a link to it at Holly's[/code]
     

Share This Page