PHP/CSS Style switcher issues & more

[I.m.learning]

I just spent 20 minutes writing up a long response just to be booted. My entire response was deleted.

plain and simple:
I have no f’n clue what I need to do.

I need help with finding why my “website” built on File Explorer (FE) fails when uploading to my host’s server. My path for images in the html can be browsed for, and automatically pathed after moving.

I want to reduce my css for the color choice for borders (I used several css sheets to change the HTML element).

I also have issues with the paths; as stated, I can get the pages to work in FE, but not after uploading.

Someone please look at my site and tell me what I can do to lessen my codes.

Honestlee.info.

There is a lot more, but am not going to write up another long response just to have it deleted.
I am looking for opinions; that’s something Crap Overflow doesn’t offer

[Shikkediel]

Unless you’re obviously spamming or trolling, no topics will get deleted here.

I am looking for opinions

That’s just not what they do over there, they solve well described code issues.

I would expect the post to be closed there first though – in this case for the reason it’s unclear what you’re asking… what fails exactly and what does this mean?

My path for images in the html can be browsed for, and automatically pathed after moving.

[Paulie_D]

A quick glance at the above shows why Stack Overflow was not the right place for that question.

It’s unclear, way too broad, asks for opinions, contains no code or error messages that might help debug and only a link asking “Please fix this for me”.

They also don’t do code reviews, that’s for another Stack Exchange site.

In fact, other than being not spam, it ticked every off-topic box they have.

As for being “booted”, you won’t get banned for a single bad question,so I’m unclear as to what that means.

We’re much more relaxed over here but we do have some standards we like to see and general rants won’t get deleted but they don’t encourage much incentive to help.

Be calm, clear, detailed and we’ll see what we can do but we’re not a one-stop shop to fix your site. We’re going to point you in the right direction if we can but we’re not going to do the work for you.

Help us help you.

[I.m.learning]

Well good, at least I know I’m in the right place…thank you for your replies.

So let’s start with this; considering It’s under PHP. I am using 13 different CSS sheets to allow users the option to change the page “border”. what this means is using a color image to change the HTML tag. This is additional to the body tag (that is another option for the user).

Each of the css styles contain around 300 lines of the same code. The difference is the URL for the different color, which is only a few lines.

I used include for the HTML for the header, footer, etc. I have researched this issue for a few days and see so many sources stating NOT to use @import.

I would like to reduce the reused code (as if we used include) for these CSS sheets. So, what I am looking for is this:

is there code to use the same CSS for these codes into one “include” (or equivalent)?

or, is there a code that could simplify my present code (is there a code I am not using to better reflect the color change options).

My schooling never taught us programming, they only gave us the codes and never expanded on its use. This leaves me lost.
Again, it’s best if someone visits my page and notices I am not using the best practice.

Notice that my code (using Developer Tools [F12]) looks awry; however, that is the include putting the code as stated.

My index.php code is:

<!– http://localhost/honestlee/index.php –>
<?php include(“include/mainhead.html”); ?>
<?php include(“include/banner.html”); ?>
<?php include(“include/navigation.html”); ?>
<?php include(“content/home.html”); ?>
<?php include(“include/preferences.html”); ?>
<?php include(“include/footer.html”); ?>

The top line code allows me to open the page in wampserver without having to type it in (I do this with all my PHP codes)

I am going to post my other issue in a different thread in order to keep things more relevant.

[Paulie_D]

We’d need to see an example of one of these stylesheets…but 13 is redonkulous. The repetion must be off the charts.

Frankly, if all the user is doing a changing specific styles by using a style switcher it woud make more sense to just have one stylesheet with all the styles in and change one class on the <body> with a couple of lines of JS.

[I.m.learning]

That is exactly what I mean; my colleges taught me about the concepts, but never really got into it. I really should have attended a tech college and not a 4-year college.

This is exactly the responses I am looking for, the “best practices”.

Now, I may be invalid doing some of my code. I am using the different images to change the border of the page; I am using <body> to change the page color. As I stated, go to honestlee.info and you will see what I am referring to

I am going to reply to my thread for just the css code (this is the “default” setting):

[I.m.learning]

[MOD EDIT]..snip

.btn-custom {
background-color: hsl(120, 100%, 15%);
color: hsl(120, 100%, 50%);
font-weight: bold;
border-color: #000;
border-width:3px;
}
.btn-custom1 {
background-color: hsl(240, 100%, 15%);
color: hsl(195, 100%, 50%);
font-weight: bold;
border-color: #000;
border-width:3px;
}
.btn-custom2 {
background-color: hsl(0, 100%, 15%);
color: hsl(0, 100%, 87%);
font-weight: bold;
border-color: #000;
border-width:3px;
}

.default {
background-color: white;
color: black;
border: 3px solid gray;
}
.green {
background-color: white;
color: black;
border: 3px solid #008000;
}
.blue {
background-color: white;
color: black;
border: 3px solid #0000ff;
}
.red {
background-color: white;
color: black;
border: 3px solid #ff0000;
}

.fontsize{width:auto;}

.default:hover {
background-image: url(“../img/index.jpg”);
color: white;
}

.s12 {
font: 12pt Times New Roman;
background-color: white;
color: black;
border: 3px solid #000000;
width: auto;
height:auto;
}
.s14 {
font: 14pt Times New Roman;
background-color: white;
color: black;
border: 3px solid #000000;
width: auto;
height:auto;
}
snip

[I.m.learning]

Crap, I forgot to remove Bootstrap code…give me a sec
Okay, you see that, if I do not use this code in the other CSS sheets, the pages will look differently.

This is something S.O. does not let users ask. With 3 weeks to go to course end, I learned about Bootstrap. I am still learning, but do not have good teachers (this means S.O.).

I figured this site was just the same as S.O. and did not start posting until yesterday. I figured I’d get ridiculed the same as they would have.

I have no idea the hundreds of options and already having issues with my images posting (the simplest things are throwing me off).

I figured the best way to ensure my pages load is to buy the domain and go for it. Glad I did because it is nothing like using File Explorer to create pages (but it’s a good start).

[I.m.learning]

I just noticed that I can use the same
background-color: white;
color: black;
border: 3px solid #000000;
width: auto;
height:auto;
for all, however, I need to include this code for each different color border

Many here have been programming for some time and know almost all options…I just learned Bootstrap a month ago and am very oblivious to the many options available.

[I.m.learning]

here is my JavaScript page (I only have 1- page.js)

[MOD EDIT – snipped a lot]

function greenpg() {document.body.style.backgroundColor = “green”;}
function bluepg() {document.body.style.backgroundColor = “blue”;}
function limefc() {document.body.style.color = “lime”;}
function purplefc() {document.body.style.color = “purple”;}
function s6() {document.getElementById(“newhtml”).style.fontSize = “6px”;}
function s8() {document.getElementById(“newhtml”).style.fontSize = “8px”;}
function s72() {document.getElementById(“newhtml”).style.fontSize = “72px”;}
function swapStyleSheet(sheet){document.getElementById(‘pagestyle’).setAttribute(‘href’, sheet);}

[I.m.learning]

The rationale behind this is; with 3 weeks to go to end of the term, and my last 2 courses for graduation, is I spent 3 days straight staring at white pages, I was starting to get flash burn.

I want my users to change colors in order for their eyes not to become as strained as mine did. Additionally, not every person has the same eyesight and some need to have larger fonts to view the pages.

I am creating my website for ultimate user experience, I am using everything I can to allow the user the options. I don’t even have cookies set up yet and feel it’s best to get the little things out of the way before continuing. I know I don’t have to do any of this, but no one else allows these options.

Just think, if I am putting this much effort into “non-essential” options, imagine how much effort I am going to place in the content for the page.

It’s exactly this too: I plan on making tutorials, ones that people, like me, do not have to travel to hundreds of sites and still not find the answer.

I want my site to be a one-stop shop for information that is credible, no fillers, and provides the best user experience.

My apologies for the lengthy responses, I’m just trying to make my intentions clear.

“I’m just a soul whose intentions are good….oh lord, please don’t let me be misunderstood”

[Paulie_D]

Whoa! The first thing to mention is that code dumps are a big no-no on forums like this.

I’m on mobile at the moment but I will mod edit that lot out when I get back to the office.

We prefer off site resources like Codepen.io for showing code.

If you are trying for the ultimate experience you may be trying too hard. A reasonable set of alternatives is fine but overdoing it might be worse.

[Paulie_D]

Repetition is definitely an issue here

.btn-custom {
background-color: hsl(120, 100%, 15%);
color: hsl(120, 100%, 50%);
font-weight: bold;
border-color: #000;
border-width:3px;
}
.btn-custom1 {
background-color: hsl(240, 100%, 15%);
color: hsl(195, 100%, 50%);
font-weight: bold;
border-color: #000;
border-width:3px;
}

See how much of that is repeated

now compare it to

.btn-custom {
background-color: hsl(120, 100%, 15%);
color: hsl(120, 100%, 50%);
font-weight: bold;
border-color: #000;
border-width:3px;
}
.btn-custom1 {
background-color: hsl(240, 100%, 15%);
color: hsl(195, 100%, 50%);
}

Repeat that a dozen times and madness is heading your way.

I also note this

.blue {
border: 3px solid #0000ff;
}

I’ve removed the repeated code.

I get why you would do this but using classes or ID’s that relate to specific colors / effects is not considered a good idea….you might need to change the color and then the name makes no sense.

…and don’t get me started on all those JS functions…that’s insane.

[Paulie_D]

I really suggest you think about how much you are trying to do here and how you are going about it.

There’s a LOT of repetition in your code…you need to think about how you can eliminate that.

If you really want to give the user that mamy options then perhaps a list isn’t the right way to go.

Perhaps a box they can put their values in and you take that and add that color / size as and when needed. All those font-sizes for instance.

Perhaps using a color picker for your colors etc.

Don’t program every option, take input and use that.

[Beverleyh]

I agree with Paulie. You have rather a lots of options and it can seem quite daunting, as well as unecessary.

How about a font-size and high contrast option and limit it to that? As least with those choices you’re keeping things in the realm of the familiar. All those colour settings makes the site feel like some sort of game interface – not (to me at least) the honest/steadfast/reliable service provider that it looks like you’re trying to portray.

[Author]

Posts