Facebook  Twitter 

SMFHacks.com

+-

SMFHacks.com

+- User Information

Welcome, Guest.
Please login or register.
 
 
 
Forgot your password?

+- Forum Stats

Members
Total Members: 4255
Latest: andreios
New This Month: 3
New This Week: 1
New Today: 0
Stats
Total Posts: 43259
Total Topics: 7518
Most Online Today: 202
Most Online Ever: 2482
(April 09, 2011, 07:02:45 pm)
Users Online
Members: 0
Guests: 163
Total: 163

Author Topic: Ratings CSS  (Read 730 times)

0 Members and 1 Guest are viewing this topic.

Offline PapaFrizArcade

  • Jr. Member
  • **
  • Posts: 76
    • View Profile
Ratings CSS
« on: March 08, 2022, 03:22:47 pm »
I am playing around with some CSS for the ratings mod.  I figured I would post some of the results here and the code I used should anyone want to use it.  If anyone notes something wrong or a better way to do something,  please speak up... I am a hack at best.

:)


First off,  if you want to increase the spacing between your ratings...

Code: [Select]
a[href$='#ratethis'] {
  margin-right: 5px;
}

Adjusting "5px" will adjust the padding between icons.

Second off,  I am working on adding a border around the ratings... still tweaking but this is what i have:

Code: [Select]
a[href$='#ratethis'] {
  margin-right: 5px;
}
a[href$='#ratethis'] img:hover {
  transform: scale(1.25);
}

.moderatorbar {
  padding-top: 16px;
  padding-bottom: 16px;
}

.moderatorbar div span:last-child {
  padding-top: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
  border: 1px solid #777;
}

The result:



A neat increase in size of each icon as you hover your mouse over the icon is included.  Currently it increases size by 25%.  You can adjust that by adjusting "img:hover {
  transform: scale(1.25)"... up to about 1.4 looks good IMHO.

I am wondering if it would be better to go with larger icons then set them to appear at 75% unless hovered over then up it to 100%.  Overall the effect would be the same but with less pixelization.  That said... i like the old school pixel look.

:)



...more to come.
« Last Edit: March 08, 2022, 03:29:21 pm by PapaFrizArcade »

Offline PapaFrizArcade

  • Jr. Member
  • **
  • Posts: 76
    • View Profile
Re: Ratings CSS
« Reply #1 on: March 08, 2022, 04:02:26 pm »
Here is my latest CSS hacking... I added a solid white background and rounded corners.

I would love to figure out how to add more space BELOW the container... I am stuck at the border height I am because when there is a signature,  the border now currently rides right on the hairline post separators... any bigger and the box over laps that hairline. 

If I can move the whole container up a little... add some padding below it... I could make the container a little larger vertically which would look nicer and allow me to increase my hover hack to increase size by 40%...

Here is what I have so far...



Here is the code:

Code: [Select]
a[href$='#ratethis'] {
   margin-right: 5px;
}
a[href$='#ratethis'] img:hover {
   transform: scale(1.25);
}

.moderatorbar {
   padding-top: 16px;
   padding-bottom: 16px;
}

.moderatorbar div span:last-child {
   padding-top: 10px;
   padding-bottom: 0px;
   padding-left: 10px;
background-color: #FFFFFF;
border-radius: 5px;
   border: 1px solid #777;
}

...forgive my exictement... I'm learning on the fly here.

:D

Offline PapaFrizArcade

  • Jr. Member
  • **
  • Posts: 76
    • View Profile
Re: Ratings CSS
« Reply #2 on: March 08, 2022, 04:26:07 pm »
Here is a video of the how the hover effect looks.  Note that my mouse cursor was actually hovering over those icons but my capture software evidently removes the cursor...

(this is set to 1.4 btw... (40% larger)... it looks best IMHO).


https://youtu.be/XgmYG0t-BQk


Offline SMFHacks

  • Administrator
  • Hero Member
  • *****
  • Posts: 16436
    • View Profile
Re: Ratings CSS
« Reply #3 on: March 09, 2022, 02:47:52 pm »
Looks nice with the spacing and size. The stock icons I have would have to be re done.
Have added a setting for the margin in the settings area now in latest version
Get your Forum Ranked! at https://www.forumrankings.net - find out how your forum compares with others!

Like What I do? Support me at https://www.patreon.com/vbgamer45/

 

Related Topics

  Subject / Started by Replies Last post
6 Replies
8188 Views
Last post March 08, 2007, 07:22:56 pm
by marcbkk
5 Replies
8048 Views
Last post August 16, 2008, 12:59:46 pm
by SMFHacks
Ratings

Started by Nugget Support

2 Replies
5436 Views
Last post January 17, 2009, 01:11:02 am
by Nugget
1 Replies
3575 Views
Last post July 05, 2010, 04:03:56 pm
by SMFHacks
1 Replies
484 Views
Last post March 09, 2022, 02:46:15 pm
by SMFHacks

+- Recent Topics

No thumbnails on new uploads by SMFHacks
March 27, 2024, 02:10:41 pm

Display the Contact Page for guests by SMFHacks
March 27, 2024, 10:55:43 am

is it possible to add support for odysee.com by fvlog19
March 21, 2024, 08:47:51 am

Request for admin notification by davejo
March 10, 2024, 01:31:59 am

I need help with torrent upload by Ineedsmfhelp
March 09, 2024, 10:01:13 pm

an idea for new mod (( content type with different display )) by SMFHacks
February 27, 2024, 01:36:27 pm

[Mod] RSS Feed Poster by SMFHacks
February 27, 2024, 11:57:18 am

find duplicate pictures by fvlog19
February 14, 2024, 02:22:40 pm

Error uploading video. by SMFHacks
February 08, 2024, 02:04:16 pm

Gallery icon as last added image by fvlog19
February 01, 2024, 01:04:56 pm

Powered by EzPortal