What page am I on? CSS suggestion

Ideas
1

I have a pretty off the wall suggestion that I've often thought of asking of other apps, but for some reason figured I'd better not lol. I guess I'm gonna ask here anyways, the worst you can do is say no right? (well hopefully that's the worst haha).

So here goes....

What about a way to see what pages that a specific CSS code is on? Maybe a toggle button/checkbox up by the Create and Search box that would turn this on and off. When in On mode it would list above/below/right/left/wherever is convenient for the programmer(s) a list of the pages in our project, that each code is on. Or maybe something more precise that might not be as laggy would be to add something to that vertical dots menu to the right of each class (next to the arrows that allow you to reorder a class) that would toggle with a checkmark to show pages for that class.

I ask this because many times I'll set something up on a few pages and then next week have to go back and adjust something ... needless to say, this old brain doesn't always remember what pages I added something to. Another more immediate example is that right now I'm looking at a class that is not greyed out (I'm under the assumption that a greyed out class name means it is not being used anywhere so please correct me if I'm assuming incorrectly on that). I've looked at 4 pages so far and I've done a search on those pages for words in that class and it cannot find it anywhere, yet I'm assuming that because it is colored blue, it is used somewhere.

If that all makes sense (which I hope it does lol), I would love to be able to toggle something to show me what pages a class is on without having to hunt and search manually for it all the time.

2

@jo,

The intension for a custom CSS is to target HTML areas that you want to make changes to beyond/override the default not to replicate it.

This means what you should do is create "Blocks" of content whether commonly repetitive (class) with in your page or unique (ID) to a page, on each page. They should be tagged appropriately so you can identify the purpose of that block without having to check from page to page.

For instance take your Ministry Teams page.

You have the right side column declared with bootstrap stuff and class .sidebar. Then you have child elements declared with bootstrap stuff and .sidebar-panel.

However, in your CSS you made a rule as div.panel.panel-default.sidebar-panel when you very likely could have just declared your rule as .sidebar .panel which mean you didn't need the .sidebar-panel and your styling would still have overridden the bootstrap.css default.

What this says is that all .panel elements that reside within the .sidebar element are styled this way, and any .panel not within .sidebar would be styled the default bootstrap way.

Then lets take this a step further...

You say you want to know all the pages that have a certain CSS rule.

Well if you wanted, lets say the side bar panel that is for donations to have the text color red while your other panels remain black. You wouldn't have to know whether or not every/some or any pages actually have that side panel because you had given it an ID of "donation-sidebar-panel" which you would then make a rule such as

.sidebar .panel #donation-sidebar-panel{
    color:red;
}

So now any page that has that element id="donation-sidebar-panel" that resides in the .sidebar element would have text color red, while your other side bar panels would remain having black text.

It really comes down more so to planning out the declaration of your block elements.

And trust me I still have to deal with this myself at times. Before I started using the paste linked, I modified a sidebar section on ~60 pages and on top of that I then did the paste linked for that same thing later on for those same pages. It allowed me to clean up several areas of my CSS using common CSS for a common block element.

I hope this does helps you out in some way, and that it's more so a coding thing then an app thing.

Saj

3

For the first part, actually, most of the classes were created by the app not by me. I didn't choose what to put there the app did. For instance,

If you have an element section highlighted and you give it a class or a unique ID, then if you click the Create button, or if you click above or below a created class in your custom files (this gives you a thin line that when pressed creates a class for you), it will create the class or ID with the full entire path of classes and ID's that is in that particular element section you have hlightled. That's how those classes that look like the one you named above were created. I do admit, some of them I created, because I couldn't get a particular attribute to work without the full title or most of the title, but the majority were created by the app like this one: div.panel.panel-default.sidebar-panel

Granted, I didn't edit them from the default the app created, which I could and can do, but that's what created those, I didn't choose to do that on my own the app did it for me. I am guilty of creating like named classes though, meaning that .sidebar-panel might have been used on another part of an element so I would then use the full class name rather than the part I'm changing. That is probably one of my downfalls there, and I guess I should get in better habits to create classes that aren't the same names so much.

For the part of wanting to know where the classes are, I do try my best to add class names that describe the element and most times the page it's on too if it's not on all pages, but I don't always remember to be super specific, or sometimes it's a class that I just overrode the original bootstrap class of and maybe I was only going to put something on one page, and in the end added it to a few... then didn't rename the classes to more specific names.

Trust me, it wasn't intentional to get it this precisely setup, just haven't gone through and redid the classes that the app created for the most part. I do appreciate that many of the classes don't need the full set of classes in that the element section has in it, it's just what the app did, so I left it (lazy and didn't want to bother with it I guess would be the best excuse lol, one of those "if it works don't fix it" type of things lol)

Either way, over the years I've found a good handful of classes that I'd like to know if they are being used or not or where they are being used, due to they were maybe just overrides of original classes from bootstrap, or I didn't give the name enough uniqueness to find it, or I repeated it more than I thought I would when I first created it. I don't claim to be a perfect coder, but I try my best. :)

In the end, the feature is just a suggestion, and I'm sure I can't be the only coder out there that doesn't always know where ever class in their style files is located.:P