Use Chrome browser? Want to edit 7.0 design?

Having difficulties? Ask here.
Forum rules
Do not to post anything abusive, obscene, vulgar, slanderous, hateful, threatening, or sexually-orientated.
Do not post anything negative about any player.
No advertising other games.
The management reserves the right to delete or lock threads and messages at any time.
Read the complete SIM rules and legal information.
User avatar
Madelene Gilbert
Hall of Fame
Posts: 3641
Joined: 16 years ago
Location: Lexington, KY
Contact:

Use Chrome browser? Want to edit 7.0 design?

Post by Madelene Gilbert »

If you are currently using the Chrome browser and can install extensions, then give this a try!

Download and Install Stylebot

It will show up in your extensions bar as "CSS". Click on it to open the menu, then click "Open Stylebot". It will open a blue-ish tinted menu. At the very bottom, click the "Edit CSS" button. In the blank space, copy and paste the following code:

Code: Select all

body {
    background: #FAFAFA;
    font-family: Arial,Helvetica, sans-serif;
    width: 100%;
    max-width: 100%;
}

textarea {
    line-height: 22px;
}

#OwnNotes textarea {
    max-height: 100px;
}

.w3-tiny {
    font-size: 13px;
}

.w3-container {
    margin: 0 auto;
    max-width: 1290px;
}

.w3-top {
    max-width: 100%;
}

.w3-bar:nth-child(6) {
    margin-top: 20px;
}

.w3-bar:nth-child(7) {
    max-width: 1290px;
    margin: 20px auto 0;
}

.formbig, .form500 {
    background-color: #fff;
    border-radius: 7px;
    box-shadow: 0 0 2px rgba(0,0,0,0.12),0 0 4px rgba(0,0,0,0.24);
}

.w3-light-grey, .w3-light-gray {
    background-color: #ffffff;
}

.sim-color-alt {
    background: #CAE8EA;
    margin: 10px auto 20px;
    padding: 5px 10px;
}

.stallion-ad {
    display: none;
}

.tabSelected, .tabSelected:hover {
    background-color: #fff;
    max-width: 1290px;
    margin: 0 auto;
}

.TabbedPanels {
    float: none;
    margin: 30px auto 0;
    max-width: 1290px;
    padding: 0 15px;
}

.TabbedPanelsContent.sim-color-alt {
    background: #ffffff;
}

table.dataTable td, table.supertable td {
    font-size: 14px;
    padding: 5px;
}

table.supertable {
    margin-top: 15px;
    width: 100%;
}

table#pastperform {
    max-width: 100%;
}

tr.even td.sorting_1, tr.odd td.sorting_1 {
    background-color: #f5f5f5;
}

.header a {
    color: #FFFFFF;
}

.w3-dropdown-content a:hover {
    background-color: #666666;
}

.w3-dropdown-hover .w3-card-4 {
    background: #5E0A21;
}

footer .w3-col, footer .w3-left, footer .w3-right {
    display: none;
}

input[type=submit], button[type=submit] {
    border: none;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    /*font-weight: bold;*/
    font-size: 14px;
    margin: 10px auto 10px;
    padding: 5px 15px;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

input[type=submit]:hover, button[type=submit]:hover, input[type=submit]:focus, button[type=submit]:focus {
    background: #C21443;
    box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
    color: #ffffff;
}
VERY IMPORTANT! Click the "Save" button at the bottom of the window. You should now be back to the blue-ish menu. You can close it from the little "x" in the upper right corner. You'll know if the new styles are loading if the "CSS" logo is green instead of grey.

You can always turn the styles off by clicking on the "CSS" logo and then clicking "Remove Styling" in the menu.

What does this do?
  • Sets max width on the main content area. Useful for large(r) screens
  • Increases the font sizes in all tables
  • Edits the hover colors to meet current accessibility standards (color contrast ratio of 4.5:1)
  • ADDED Dimmed background from pure white, toned down box shadow, edited some background colors
  • ADDED Delayed dropdown menus in header bar
Last edited by Madelene Gilbert 6 years ago, edited 5 times in total.
User avatar
The Admin
Eclipse Champion
Posts: 1070
Joined: 18 years ago

Re: Use Chrome browser? Want to edit 7.0 design?

Post by The Admin »

Please help me understand, why would people intentionally open their window wider than 1290 pixels, but want the content limited to 1290? Wouldn't you just make your windows less wide? Some of the SIM tables have limits of the 700-900px. The overall site has a limit of 1900. Isn't the beauty of a responsive design is that it on whatever size the user uses? We can consider an overall width limit, but I need to know why people want a limit they can't (easily) control verses setting their own limit via window width?
User avatar
Danny Derby
Hall of Fame
Posts: 3660
Joined: 14 years ago

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Danny Derby »

Admin wrote: 7 years ago Please help me understand, why would people intentionally open their window wider than 1290 pixels, but want the content limited to 1290? Wouldn't you just make your windows less wide? Some of the SIM tables have limits of the 700-900px. The overall site has a limit of 1900. Isn't the beauty of a responsive design is that it on whatever size the user uses? We can consider an overall width limit, but I need to know why people want a limit they can't (easily) control verses setting their own limit via window width?
My preference is to have my browser take up the entire screen with all the tabs I need in it. I don't resize the window or have separate floating browsers, that's the beauty of tabs.
User avatar
Danny Derby
Hall of Fame
Posts: 3660
Joined: 14 years ago

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Danny Derby »

Maddy,

Not as clean as yours, but here's how I've got mine set up. Open for any help improving!

Code: Select all

html {
    border-style: solid;
    border-right-width: 250px;
    border-left-width: 250px;
    border-color: #3b0400;
}

div.w3-bar.w3-row-padding.header1 {
    width: 1230px;
}

div.w3-bar.header.w3-row-padding.w3-text-white {
    width: 1230px;
}

div.w3-container {
    margin-left: 25px;
}
User avatar
Madelene Gilbert
Hall of Fame
Posts: 3641
Joined: 16 years ago
Location: Lexington, KY
Contact:

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Madelene Gilbert »

Admin wrote: 7 years ago Please help me understand, why would people intentionally open their window wider than 1290 pixels, but want the content limited to 1290? Wouldn't you just make your windows less wide? Some of the SIM tables have limits of the 700-900px. The overall site has a limit of 1900. Isn't the beauty of a responsive design is that it on whatever size the user uses? We can consider an overall width limit, but I need to know why people want a limit they can't (easily) control verses setting their own limit via window width?
Having a max-width is considered "good practice" for responsive design, because at some point your screen resolutions become so large (think large computer monitors and TVs) that it stretches the page content so much it becomes unreadable. For instance, when I have SIM 7.0 operating 100% width on my 23" monitor, the space between content in the table cells is 2+ inches. It's very very hard to scan content across the row, and is actually more fatiguing to the eyes than if the content was presented closer together.

Also, I don't know many people who use windowed screens to run their programs; most open windows to maximum (full screen) view. Therefore, they aren't resizing their windows to find a "sweet spot" in the design. In this case, giving the user more control (what you would consider the ability to modify their window size) is actually detrimental to the user experience.
User avatar
Madelene Gilbert
Hall of Fame
Posts: 3641
Joined: 16 years ago
Location: Lexington, KY
Contact:

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Madelene Gilbert »

Danny Derby wrote: 7 years ago Maddy,

Not as clean as yours, but here's how I've got mine set up. Open for any help improving!
You've grabbed most of what I did, if not used more specific CSS attributes. I checked my rules across several pages and they seemed to cover all the content.

I don't like to set styles to the <html> tag because it doesn't always work. You might sub that for the <body> tag instead.
User avatar
Madelene Gilbert
Hall of Fame
Posts: 3641
Joined: 16 years ago
Location: Lexington, KY
Contact:

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Madelene Gilbert »

p.s. I just arbitrarily picked 1290px for my max-width. Bootstrap uses 1140px, which I think is a little TOO small. Foundation uses 1170px. I like it a bit wider; you still get breathing room in the content, but it doesn't feel...pulled apart. It has just enough margins on my laptop, but looks really nice on desktop.
User avatar
Danny Derby
Hall of Fame
Posts: 3660
Joined: 14 years ago

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Danny Derby »

Changed the <html> to <body>, that actually helped a bit.

Code: Select all

body {
    border-style: solid;
    border-right-width: 250px;
    border-left-width: 250px;
    border-color: #3b0400;
}

div.w3-bar.w3-row-padding.header1 {
    width: 1230px;
}

div.w3-bar.header.w3-row-padding.w3-text-white {
    width: 1230px;
}

div.w3-container {
    margin-left: 25px;
}

User avatar
Robbie Dee
Classic Contender
Posts: 356
Joined: 7 years ago
Location: Cornwall UK

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Robbie Dee »

Madelene I tried your code and although it all looks much better, I can't get the horse's weather preferences to show up in the racing barns.

My barns have all stakes or all allowance so I don't need the gallop comment in those racing barns but I need weather preferences.

Is there a simple fix so that I can have some barns giving gallop comments and some giving weather preferences.

Thanks

Robbie
some days you're the pigeon and some days you're the statue
User avatar
Madelene Gilbert
Hall of Fame
Posts: 3641
Joined: 16 years ago
Location: Lexington, KY
Contact:

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Madelene Gilbert »

Robbie Dee wrote: 7 years ago Madelene I tried your code and although it all looks much better, I can't get the horse's weather preferences to show up in the racing barns.

My barns have all stakes or all allowance so I don't need the gallop comment in those racing barns but I need weather preferences.

Is there a simple fix so that I can have some barns giving gallop comments and some giving weather preferences.

Thanks

Robbie
The "smart", or main, Racing Barn doesn't appear to have the Weather column. I just checked my Manage Barns, and I'm not seeing the option for the Weather Preferences either. The Admin may be tinkering at the moment - you might have to fill out a support ticket. My code doesn't manage the operations (remove or modify existing columns), it only changes the look of it.
User avatar
Madelene Gilbert
Hall of Fame
Posts: 3641
Joined: 16 years ago
Location: Lexington, KY
Contact:

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Madelene Gilbert »

A lot of people were saying they didn't like the bright white, so I added some code to dim that out and tone down the box shadow (I am NOT a fan of gratuitous box shadows - so 2010).
User avatar
Robbie Dee
Classic Contender
Posts: 356
Joined: 7 years ago
Location: Cornwall UK

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Robbie Dee »

OK thanks anyway Madelene

I can get the weather preferences from the horse page.

It still looks better.

Robbie
some days you're the pigeon and some days you're the statue
User avatar
The Admin
Eclipse Champion
Posts: 1070
Joined: 18 years ago

Re: Use Chrome browser? Want to edit 7.0 design?

Post by The Admin »

Madelene Gilbert wrote: 7 years ago
Admin wrote: 7 years ago Please help me understand, why would people intentionally open their window wider than 1290 pixels, but want the content limited to 1290? Wouldn't you just make your windows less wide? Some of the SIM tables have limits of the 700-900px. The overall site has a limit of 1900. Isn't the beauty of a responsive design is that it on whatever size the user uses? We can consider an overall width limit, but I need to know why people want a limit they can't (easily) control verses setting their own limit via window width?
Having a max-width is considered "good practice" for responsive design, because at some point your screen resolutions become so large (think large computer monitors and TVs) that it stretches the page content so much it becomes unreadable. For instance, when I have SIM 7.0 operating 100% width on my 23" monitor, the space between content in the table cells is 2+ inches. It's very very hard to scan content across the row, and is actually more fatiguing to the eyes than if the content was presented closer together.

Also, I don't know many people who use windowed screens to run their programs; most open windows to maximum (full screen) view. Therefore, they aren't resizing their windows to find a "sweet spot" in the design. In this case, giving the user more control (what you would consider the ability to modify their window size) is actually detrimental to the user experience.
When you manage barns. we give you about 20 columns you can choose to display for horse listings. If you turn on all of them, 1290 is not wide enough to see all the columns. Is it right to prevent people with large screens from being able to see all the columns we allow them to see?
User avatar
Madelene Gilbert
Hall of Fame
Posts: 3641
Joined: 16 years ago
Location: Lexington, KY
Contact:

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Madelene Gilbert »

Admin wrote: 7 years ago
Madelene Gilbert wrote: 7 years ago
Admin wrote: 7 years ago Please help me understand, why would people intentionally open their window wider than 1290 pixels, but want the content limited to 1290? Wouldn't you just make your windows less wide? Some of the SIM tables have limits of the 700-900px. The overall site has a limit of 1900. Isn't the beauty of a responsive design is that it on whatever size the user uses? We can consider an overall width limit, but I need to know why people want a limit they can't (easily) control verses setting their own limit via window width?
Having a max-width is considered "good practice" for responsive design, because at some point your screen resolutions become so large (think large computer monitors and TVs) that it stretches the page content so much it becomes unreadable. For instance, when I have SIM 7.0 operating 100% width on my 23" monitor, the space between content in the table cells is 2+ inches. It's very very hard to scan content across the row, and is actually more fatiguing to the eyes than if the content was presented closer together.

Also, I don't know many people who use windowed screens to run their programs; most open windows to maximum (full screen) view. Therefore, they aren't resizing their windows to find a "sweet spot" in the design. In this case, giving the user more control (what you would consider the ability to modify their window size) is actually detrimental to the user experience.
When you manage barns. we give you about 20 columns you can choose to display for horse listings. If you turn on all of them, 1290 is not wide enough to see all the columns. Is it right to prevent people with large screens from being able to see all the columns we allow them to see?
Because the tables themselves are set to 100% width, they "fill" up the space up to 1290px (or whatever the max-width is set to) and readjust their widths accordingly; nothing is getting cut off. I even turned off my styles to double check, and I'm not seeing any columns disappearing in overflow. There's also nothing in the source code that shows Weather Preferences are being pulled into the page and subsequently hidden with CSS.
User avatar
Madelene Gilbert
Hall of Fame
Posts: 3641
Joined: 16 years ago
Location: Lexington, KY
Contact:

Re: Use Chrome browser? Want to edit 7.0 design?

Post by Madelene Gilbert »

JUST ADDED delay transition on the dropdown menus in the header bar! Shouldn't be as twitchy now!
Post Reply