Dynamic css problem

#1

Hello everyone,

i’m building a nature site with a custom router which uses taxonomical names for navigation and css. Everything is working but i have a small problem and i’m not sure what to do about it other than use a substring check. Here is the problem:

for birds, the path for the router is Animalia/Chordata/Aves. For all ranks, i use the rank as the name of the css file which controls the display for the rank options. Aves (birds), however, is further divided into orders. I do not use orders but i built them into my design incase someone wants to know how birds are structured. So all passerine birds will be viewable under Passeriformes. I do not have a Passeriformes css file. The code is in the Avess.css file. My template only displays the path name .css which is working for everything except bird orders.

I decided to check for ‘formes’ in the substring. so if substr $path -6 === ‘formes’ then write aves.css. I think that a substring check will slow down the site a bit, yes? is there a better method for this? i don’t want to make over 30 css files which contain the same info found in aves.css. This is only a problem with birds because i want to use orders as a convenience.

any ideas of how to do this better and easier than a substring check?

#2

I find questions like this that are more about design philosophy or architectural decisions are much harder to give valuable feedback on than spesific coding problems.

Is it possible to have a look at the entire code base for this project? There are really lots of considerations to take before settling on how one wants to structure the application. Ie is there so much (varying) css involved that you can’t just have a standard “theme” file which you (might) extend on sub pages? How are you doing the templating, how are you structuring templates and css, etc.

I just know if I were to build something like this then I’d try to make a default theme that is usable for the entire site. Could you give an example of how the css is different between different “ranks”?

2 Likes
#3

all taxonomical navigation goes through a single navigation index php file. The only things that change are titles, breadcrumbs and content. The css is separate from the main css because each rank could have thousands of lines of code, which are only useful to that particular rank. Thus, it is a waste to load all of that css on pages that do not require it.

i think that i sent a link to you for a video of my project. yes?if you saw the design in the video, then the css is used to control the circular icons, which use a transform scale of 1 on hover. most people use cookie cutter designs, so i don’t expect anyone to know that individual css is required for this design to work. Otherwise, hovering the circles is shaky and odd in every browser. However, the bg photo/icon cannot be changed unless individual code is used anyway,

everything is working well but i base the css file on the class or order if it exists in a css array. if in array then display file,css. In this case, Animalia/Chordata/Aves will call aves.css but chordata doesn’t have a file. if in array fails so nothing is loaded. I do, however, need aves css to load when a bird order is called. Accipiterformes does not have css because it is in aves.css. The way that i designed the navigator fails to allow me to include the -formes bird orders without the corresponding css. I simply need to add aves.css when a bird order is used. This is only a problem because i want to allow bird orders to be viewable. Most of the time, i ignore orders and suborders. I do not see a reason to include this structure.

do you have the video or do you need to see it again? i’ve since redesigned some of the front end so it looks a bit different from the last video.

#4

I would work on fixing this instead of trying to work around it. Even with some transforms/animations each category shouldn’t have to be thousands of lines of css. And if you do have extensive css rules where only minor parts of it are different then perhaps move whatever is “the default”/common into the main file and only have what’s different in each categories css file.

I might be very wrong but imo a website should keep the same design/flow through different categories (or in this case: ranks). The same design should warrant the same css. This is what gives me the feeling there is some issue with how this project does things.

This sounds strange. As long as the photo/icon is of the same size then it really shouldn’t matter what it is. Are you able to create a quick demo on some fiddle site? ie plnkr…

I don’t have the video (I got it a while back but can’t remember spesifics).

#5

I will send a link to the video via pm.

this is not how css works, Jim. one cannot have the same name for multiple links and perform different actions upon that link. one could use an id versus a class but i already use an id for a media command. I’ve already done this and beat my head on a table trying to get it to work and the circles only work smooth in every browser when individual css code is used. I’ve even tried to patent my design but a lawyer said it cannot be patented. Anyway, the circles require individual control or they wobble, shake and become blurry in every browser. I don’t mind thousands of lines of css, I like the way it works.

If the same css is used for each circle, then only one circle works (because hover effects need a name to access that particular circle).

the template page works fine except i don’t have order css files. i need to load aves instead and i don’t want all rank css in one file.

i send a video link to you so you can see the design.
let me know if you get the video and Thank you very much for your time and expertise, Jim. I appreciate you very much. :slight_smile:

#6

By the way, please pay attention to the breadcrumb title bar, I ask this of you because i may need help in the future regarding this breadcrumb bar. I want to reduce the breadcrumb links if the amount of links are greater than five. Otherwise, the titlebar is not big enough to hold the entire path when scientific nomenclature becomes long. For example, Sarcophaga (Heteronychia) haemorrhoa pushes it to the brink. I decided to use a css drop down for the first three links when five or more links are displayed in the breadcrumb title bar. I may need to ask for help with this in the future. I’m not sure how to do it without complexity.

#7

Hello Jim,

i apologize to you for my sloppy post. I did not remember why i used css background image. Yes i need 200 entries for the families, so you are correct: i should try other methods.

I’ve sent a pm to you about this subject.
You are a great help. You always help me see the light and i’d like to repay you someday. You are a good man and let noone say otherwise.

Thank you.

Sponsor our Newsletter | Privacy Policy | Terms of Service