Jean,

Yes the Link worked. Thank you for the heads up. Just have to know how to use it now.

Does the change effect all sites (web pages) or just this one when you make the change?

Hi Urlee....an icon will appear in your address bar. Right click on it and choose options to set choices. left click and have it set to work on one page or the entire domain' or on all pages.

not2bright since you use Stylish: https://userstyles.org/styles/browse/gardenweb

Both have problems but may give you ideas. You could copy it , modify it, fix it, share it, laugh at it and delete it, whatever.

I keep messing with it, sometimes making it worse, sometimes better. To my eyes it's an improvement but I have strange tastes.

That is like the "no squint" ad on for firefox.

Thanks, Richard! I'll check them out. :-)

jean_mi_z5,

Thanks SO much. This has made a huge difference. Nice of you to share the tip.

Thanks for the Stylish tip! I used to use something similar that was built into the Opera browser until they "upgraded" it and removed the feature. I installed the Stylish add-on last night for Opera and Firefox and downloaded those two styles. I altered them to suit my needs and just added my altered style to userstyles under the name GardenWeb Houzz Dark

I have an unusual situation in that I am using a 32" led tv as a monitor. It is great for viewing photos and multi-tasking, but all the white on this site is like looking at the snow on a sunny day! I just went real simple and darkened a lot of the backround to the stock shades of grey. I made the font Verdana which is much less fuzzy looking to me, and made most of the hyperlinks old school blue and purple underlined, although I did use a dark blue. It is not pretty, but easier on my eyes. I commented it to make it easier for others to alter.

Also for fellow squinters a good free program for the PC is F.lux. It automatically will dim and warm your display based on the sunset to prevent eye strain and sleep disturbances. I also use the Twilight app on a tablet for the same purpose.

Yeah molanic, you've got the right idea. I was hoping someone would do that.

Allowing the user to customize isn't that hard. I had variables for the sides and the central area for the style I wrote for the old site. My problem was, I'd end up editing my local copy and pasting the revision at userstyles.org. No more variables. :)

Looked kinda like this:

Thanks Richard! I started adding the user options and it wasn't that hard, although a little time consuming. I added options for the font face, size, link colors, and background colors for a few things. I tried it out and it works great. It looks like it remembers your selections and lets you change them and then update it on your computer.

I've been experimenting with the layout settings, but there are so many nested levels it is crazy. Well beyond my ability to decipher. It takes a lot of code to make such a simple looking site apparently! IMO they use a lot of unnecessary fixed-width elements too... which drives me nuts. It is just not flexible enough for small displays or even using non-maximized windows on large displays. I hate to have to horizontal scroll back and forth to access something.

Thanks again for the tips and uploading the styles sheets. Hopefully it will help people with the transition. I'm sure the complaints about the colors are at the bottom of Houzz's to do list with the issues many are having with usernames and such.

No problem molanic.

Nice job commenting your code. I should do that, just too lazy.

The old Gardenweb used a lot of nesting too. Maybe it didn't start out like that but got that way after several revisions? Keeps me guessing which class/id I need to specify. I was using Firebug (and I still do) but lately have been finding myself using "Adblock Plus Element Hiding Helper". Which also helps remind me when to use a hash mark and when to use a dot.

At first I was frustrated by the footer not scaling. But after seeing it has "min-width: 1000px;" applied to it, I decided not to worry about it. At least not right now.

I'll probably combine my two into one. Let the user choose the background images, sides and center. With "gardenweb" applied, it looks close enough to how it used to look that I still feel at home. I think when I was using it on the old Gardenweb, hardly anyone else was using it so I pretty much just wrote it to suit myself.

I'll have to look at that Firebug and Adblock. I was just using the "inspect element" on the right-click menu in Opera and Firefox. I kind of like how in Firefox it shows all the styles applied to the element and lets you change them like a preview.

My css knowledge is super limited. I did some web design like 10 years ago and only used css for very basic things, then promptly forgot what little I did know. I do remember layout was more difficult and very inconsistent across the browsers. It is kind of trial and error for me.

The few layout changes I made helped on my computer with resizing windows, but seem to have made it worse on a tablet. I noticed you can apply more than one style sheet at a time with Stylish. So I think I am going to do one style for colors, and another for layout testing. That way I can have one layout for my computer and another for the tablet independent of colors. I'm trying to not change the layout too much since it gets pretty messy to deal with.

I went to *edit* on my FF add on page and I cannot find the place to change the code for the font. I see a font code(brown) but changing the color to black does nothing. Someone tell me how to change the font using Stylish? OH and BTW I have it on the Morning Glory choice.

OK I have been messing with this and changed the style to one of the Houzz styles, the third one down on the style choices. This one gives you the ability to change the size of the font. Also if you go to edit it using the FF add on edit tool, you can change the code later to be even bigger if need be. What I was doing wrong is, I changed the font size but didn't realize that at the top of that page, you have to click the SAVE button. Then(and only then) your changes will take effect.

I just updated my one style for fonts and colors again. I made it so the font size can be in any units (%, px, pt, em), but defaulted it to % and set the main body font and a few others to 100%. It may have to updated through the userstyles site and not automatically to get the changes. I think that should allow it to scale better and default to whatever the default font size is in the web browser. Hopefully it works better.

My layout style is still goofy, so I have to tinker some more. I don't want to put too much time into this because it will all break if they change the design. But, doing this is a good way to procrastinate with other things I should be doing instead. :)

Jean, thanks for the link to Chrome's extension, Change Colors. I added it to my arsenal along with High Contrast and the results are quite pleasing to my tired, old eyes. Very much appreciated.

Rosie

Glad to hear that some are liking it. I use it on different sites. :) I will be looking into High Contrast.

install the No Squint FF ad on. It is very, very simple to use.

The chrome Change Color worked for me also. Thanks! NOT!

Edited to add that now I can't see the text in other posts. It was working, and I can still see that posts I've looked at are red, which is nice. But it won't help if I can't read the text.

Don't know how else to describe what happened:(

hey thats nice! got this morning glory one.... thanks techie gardenwebbers =)

ooo and nowbold is working, theres an easy icon for it!

this is from installing stylish and the morning glory backdrop, on firefox....it gave me the bold and italics icons

hey thanks all for hooking us up with this stuff. very cool!

i really hardly knew what i was doing but i just copy and pasted and posted a new version. i put two of them there together, added color to the "morning glory" and messed around a bit with some of the settings....it really wasnt that hard once i got into it, although no claims that i knew what i was doing or didnt mess it up! but i did get a nicer grey more mellow backdrop and more appealing colors after messing with it.

you can find it at that above link or here:

gardenweb-morning-glory-with-purples

https://userstyles.org/styles/browse/gardenweb

@leila hamaya

You've got the right idea.

I won't pretend to be creative or colour coordinated. I know I'm not. I'm sure you can make many improvements.

I did the the original a year or so ago to please my tired old eyes. And my own "rathers and rather nots". My taste is my own, my favourite style being gardenweb. I did gardenweb (morning glory) mostly just to fill a request. Which surprisingly to me, turned out to be more popular.
Have fun!

yeah that was some geek fun =)

i did a couple more, which was mostly me messing with my own. this last one came out pretty good, so i am sticking with that.

i posted it HERE - gardenweb-morning-glory-with-purples-3

they seem to work ok on my big screen....and much prettier, easier on my eyes... here and there some letters get squished, cause i used some big fonts and didnt quite figure out all the settings...but its only on long post names, or once in a while......but otherwise, good enough! maybe i will mess with the sizes again some other day, and make them a little smaller.

perhaps you will enjoy checking it out.

@ Richard (chuggerguy)
you shouldnt knock your designing abilities, i can tell you have the knack for creating, an artists eye =)
...i checked out the one you just uploaded with the daffodils, very nice!

Thank you leila hamaya.

I like how you thought of changing the background of the posts. Makes them stand out. The colours are nice too.

I'm getting some out of bound text on your second two.

Truthfully, I've tweaked mine until I was dead certain I had it working perfectly. Then I'd go to my bedroom, turn on my bedroom computer, and back up I'd be, fixing something else.

Oh well, I suppose solving the problems is the fun part? :)

well i was just making it up as i went along, without really knowing what i was doing.

i do speak geek, even if i am not totally fluent in it =)

but yeah if you know how to fix it up, go for it...i somewhat intended the "out of bounds" text, or well that overlap was intentional, i like it that way...i think!

or perhaps you mean it cuts off the words? or something else?

but i dont know how it would look to someone else. i have a lovely enormous screen.

CSS can be frustrating with all the cascading, especially if you're like me and figuring it out as you go along. Richard, I can see what you were saying about adding in the user options on userstyles. If you work on the style locally, there is no easy way to update the style online without messing them up aside from a lot of copying and pasting in the changes. That is why I finally separated out the font / color style from the layout one. I am still messing with the layout a lot.

I have a huge display on my desktop computer and often like to have two windows open side by side. That is one reason I am trying to make the content rearrange and wrap to accommodate narrow displays. I figured out how to use media queries so that it will only happen when the screen is 800 pixels wide or less. Then I thought it would be nice to have it do the same thing on a tablet or phone in portrait mode...so that the main body content filled the screen width wise with no need to zoom in and out. I got it to work, but found if you don't zoom then all the text is too small. My attempts to increase all the fonts all at once makes them all go haywire. It is a puzzle!

i was wondering that...if i keep messing a bit with the one i made for me, will it edit the ones i posted? ah well, that might not be so bad, unless i mess it up. i am only messing with the i made for myself. when i "saved" a new change, i gave it a new name hoping that
wouldnt edit the other. tried them all out and they all worked good, so far.

tho i did an edit on the 2nd one i posted yesterday, for the "out of bound" text box, and reduced some of the huge fonts....then pasted in the change into the original.

i made a couple more, where i was trying to lock in the format good, so that one could put any background behind it...sort of universal... i also messed around some with the format stuff you posted, molanic with the coding to resize and for small screens, but i eventually ran out of steam and didnt finish. i think it might be a bit above my head! so perhaps i will give it up for now. but in a few days i might make a few more, dont want to go overboard, but its sort of fun to play with... if you could make a nice simple one for tablets and small screens it would be nice.

maybe later i will mess with a few more, with not such a huge font...and post them.i like the idea of trying to lock in a good design, and then anyone being able to plug in their own picture as a background....

as it is, it has made looking at these pages a LOT better!

anywho not like what i did was the best or whatever, but if you feel like messing around with any of it, please do. i am good with design and colors and the pretty factor =) so i could also get that basic design, if i can get it down, and do the colors, and decorating =)

the thing that was driving me totally crazy is that box...on the "your houzz" profile page...the "invite friends" and "followers/following" box...it kept being squished together and running into the "ideabooks" and just a PITA ! i would get the layout looking good...on every page except for that...then by the time i would figure out what settings affect that..by having to try to change...everything until it helped...then it would mess up all the other layout and pages! if you all know what that is called and how to directly affect that and only that, this would be helpful for trying again

Does this help?

.profile-l-sidebar .hzBtn {
width: 100px !important;
}

.profile-overview {
overflow: visible !important;
}

ooo i will see......try a bit of editing again, i am avoiding the mountain of work i have to do...for at least another hour or two =)

ok yes, that does seem to have worked!

it keeps it small but the words fit correctly and dont bump the other side....ah ok i think i will go and mess around with the ones i did... to paste that in....maybe take one more stab at making the font size smaller...the normal layout of houzz was such that i was having a hard time reading...even focussing on it...so i think i went too far in the other direction and made the fonts huge and heavy....

got all the little bugs out, that i could find, and changed them a
little, just mellowed out some of the font sizes...cause i made them
kinda huge....anywho maybe i will post up a new thread somewhere...to
let people know they are out there and usable...

https://userstyles.org/styles/browse/gardenweb

the codes you wrote for that box worked great!

but one weird thing is for some reason, posts in this computer forum, dont look indentical to those posted elsewhere? ah well whatever...but it makes the post bolder here...for whatever weird reason.

I haven't had much luck so far with the font sizing issues on the tablet. It is frustrating to even work on because the Stylish add-on for the tablet has no option to edit or even view the style. I tried just hosting the file and choosing the install from url option so that I didn't have to keep uploading every change to userstyles just to test changes, but that was frustrating. There is no auto-update option that way and every time you have to paste in the url and give it a new name. So I just uploaded a tablet-testing style instead and keep going through the whole process to upload then download with every change I try. My 7" tablet isn't even a major brand like an iPad either, so even if I do get it right on mine, it may not be good for others anyways.

aw thats a bummer!

i tried to wade through the code you were working on, and maybe was starting to get close to something good...but i was mostly just changing the visual stuff, colors and images...and thinking you had the resize and small size stuff right...it looked right from where i was, but i dont have a tablet...

i have heard people say here that tablet viewing of these pages is bad...so it would be helpful if there was a nice one

anyway most of the coding you wrote was way above my head ! but if there is a way i can help you, let me know.
you dont have to understand it all to copy and paste =)

but i dont have a tablet....just a desktop...
on the other thread i made,
oldmobie

was offering to help, and he's on a tablet and trying to figure it out. he said he couldnt get to the edit page either....

ok,

heres my latest attempt:

https://userstyles.org/styles/110866/gardenweb-daffodil-style-2-tablet-tester

was working on what molanic had been writing, trying to clean it up
and edit it/organize it...then adding the "daffodil style" to the small
experimental tablet /small screen version he made.

made
it so that the variables one would want to change easily are all at the
top, font + size, color and url of image file....all grouped
together...then all the experimental size/tablet coding is at the
bottom.

it could at least be useful for checking out the code...

actually it looks great on my end....but again i am on a big screen.

I did not like the morning glories, not sure how I did it, it's been so long ago. I think I did it by right clicking on it and had adblock plus put a filter on to block them. I could have been when I set my background to pink with No Squint. I use pink because there is no glare and it's easier on the eyes.

Well, I did figure out how to edit the styles on the tablet in Firefox, which will make things a lot easier for testing. You just enter this into the address field, replacing the id number to one that corresponds with your style <b>about:stylish-edit?id=1</b>

It takes a little trial and error to find the right number to enter since it looks like each style gets a number when it is installed, but I don't think it re-uses numbers after you uninstall one. So just keep counting up the numbers until you find the right style. Numbers for uninstalled styles just come up blank.

If you can use a separate keyboard with the tablet it would make it easier, but using the built-in one works. I couldn't scroll down all the way for some reason in the edit box, but I have the free "hacker's keyboard" installed from Google Play store which has directional arrows for moving the cursor and that worked great. I'm hoping when I am done I can just copy the code and paste it into the userstyles site right from the tablet.

The only thing I have found so far that works for the tablet in portrait mode is to set all the fonts to same fixed pixel size and a large one...30 pixels. When I use a smaller fixed font size the tablet screen defaults to a zoomed out look with tiny fonts and lots of blank space. If I try applying a larger % font size to everything it makes all the headers and stuff so big that it is un-useable. The regular style seems to look ok in landscape mode, even with the column layout boxes on the sides. Going to fiddle some more.

leila hamaya

I once did a Christmas theme. Winter scene along the sides. A second image placed directly over the first with falling snow. I forget what I did with the center area. Nobody was using themes at that time so I didn't finish it.

I bet with your creativity, an Easter theme, Spring theme, whatever, might be enjoyable?

Just an idea in case you get bored, not a request. :)

i have 3-4 more to work on...but maybe....

finally finished with the new batch =)

just finished the gardenweb-rose

which was the only one of the bunch that was really tricky, but got it looking awesome !

https://userstyles.org/styles/110890/gardenweb-rose

maybe it seems like a lot, but now i got a good formula, so its only minutes to make one...different image files.

the others are nearly identical,so they were all super quick.

wanted to make some really simple ones, and a few more elegant ones....but the simpler ones may be more appealing to others.

theres a few more i am working on, also identical mostly except for
the background image......but those need some image editing to be ready.
like the rose i had to resize it over and over to get it down !
it is one of the best i made tho, imo...

@ molanic, did you see the option for x-large/xx-large font size?

i wonder if that would work better than a fixed font size?

ummmm...here....like-->

@media only screen and (max-device-width: 800px) and (orientation: portrait) {

.hbs * {font-size:x-large !important; box-sizing:border-box !important;}

}

well i tried that out on the daffodil tablet one.

if anyone wants to try it out i am wondering how it will work. i edited it twice, and it looks ok from here, but dont have a small screen to see...also the rose one. i dont think i quite have it down, but i added some of the resize code...it resizes well...gets thin and stretches out, shows more or less of the image file..its interesting anyway...for medium--->big screen it changes the background roses...as you adjust the size of the window.

Is there a way to get other backgrounds, like from a photo, onto the background? I was thinking about a KISS or AC/DC related scene!!!

Faron

hey yeah faron79, just install whichever one you like best, and then edit the url to point to your picture.

it might be a bit intimidating, but if you install them, go to add ons
(in your browser "tools"), click edit button beside you "user styles"...it brings up the code. if you scroll
down to where theres a web address, and erase that one then put your own
pictures web address in, it will show that image in the background.

the last ones i made have the web address right at the top of the code so its easier to find.


i put some instructions, and made a thread on the main seed exchange page,
here:
http://forums2.gardenweb.com/discussions/2867554/have-different-backgrounds-and-improved