Jump to content
Sign in to follow this  
AstroSpud

[Tutorial] Forums Redesign v2

Recommended Posts

I took it further this time by making the forums look more like the website.





[spoiler]


MFhpQ8o.png


qQeQ3ex.png


eIKWFdU.png


[/spoiler]


Install 'Stylish' extension. Chrome Firefox Opera

Note:I do not own stylish.

Install my script. Firefox.





Tutorial for Chrome.


[spoiler]


Install Stylish (Link above).


Once it's installed, there will be an icon in the top right.


Click on it.


A thing will pop up.


Click on Manage Installed Styles.


W19SuNL.png


It will open a new window.


Click Write new style.


ink3t1l.png


Copy and paste all of this:

/* Delete this for normal font */
/*==============================================================*/

@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 500;
src: local('Dosis Medium'), local('Dosis-Medium'), url(http://themes.googleusercontent.com/static/fonts/dosis/v1/A4RWZsncmJ25G8iqn2EHN_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 600;
src: local('Dosis SemiBold'), local('Dosis-SemiBold'), url(http://themes.googleusercontent.com/static/fonts/dosis/v1/f8qltGyj2S-SS_tsOHsjgfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 700;
src: local('Dosis Bold'), local('Dosis-Bold'), url(http://themes.googleusercontent.com/static/fonts/dosis/v1/x-7NZTw0n-ypOAaIE8uSrvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
/*======================================================*/

.input_submit {
background: url("[url=http://i.imgur.com/dY1Ru0G.png]http://i.imgur.com/dY1Ru0G.png")[/url]center !important;
border:solid 1px white !important;
box-shadow:none !important;
transition:0.3s !important;
color:pink !important;
}
 
.input_submit:hover{
color:gold !important;
opacity:0.9 !important;
}
 
 
 
 
::selection{
background-color:rgba(255,102,0,0.5) !important;
color:rgba(30,144,255,1) !important;
}
 
::-moz-selection{
background-color:rgba(255,102,0,0.5) !important;
color:rgba(30,144,255,1) !important;
}
 
body{
font-family:'Dosis',sans-serif !important;
font-size:75% !important;
    background-color: #73ACE3;
}
 
DIV#board_statistics.statistics.clearfix{
border-top:solid 3px rgba(255, 140, 105, 0.5) !important;
}
 
 
 
H3#anonymous_element_88{
background:transparent url("[url=http://pokemmo.eu/images/background-header-footer.png]http://pokemmo.eu/images/background-header-footer.png")[/url]bottom !important;
color:white !important;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5) !important;
font-family: 'Dosis', sans-serif !important;
}
 
DIV.ipsBox.table_wrap{
border-radius:20px !important;
}
 
#ipboard_body{
background-image: url("[url=http://pokemmo.eu/images/background-sky.jpg]http://pokemmo.eu/images/background-sky.jpg")[/url]
!important;
background-attachment: fixed;
background-size: 100vw 100vh;
 
 
}
 
#branding{
background:transparent url("[url=http://pokemmo.eu/images/background-header-footer.png]http://pokemmo.eu/images/background-header-footer.png")[/url]bottom !important;
margin-bottom:2px !important;
color:black !important;
box-shadow:0px 5px 3px rgba(0,0,0,0.5) !important;
 
}
 
#logo:after{
content: "No Bullshit, Just Games!" ;
margin:20px !important;
font-size:24px;
position:absolute;
color:white !important;
text-shadow: 2px 2px 3px rgba(0, 0, 0,0.9) !important;
}
 
img[src*="https://forums.pokemmo.eu/public/style_images/master/logo.png"]{
background:transparent url("[url=http://pokemmo.eu/images/pokemmo.png]http://pokemmo.eu/images/pokemmo.png")[/url]bottom no-repeat !important;
width:0;
height:39px;
padding-right:292px;
margin-top:10px;
}
 
h3.maintitle{
background:transparent url("[url=http://pokemmo.eu/images/background-header-footer.png]http://pokemmo.eu/images/background-header-footer.png")[/url]bottom !important;
border:none !important;
text-shadow:2px 2px 0px rgba(0,0,0,0.4) !important;
border-radius:5px !important;
}
 
 
 
#community_app_menu > li > a{
background:transparent url("[url=http://pokemmo.eu/images/call-to-action-blue.png]http://pokemmo.eu/images/call-to-action-blue.png")[/url]center no-repeat !important;
border-radius:5px !important;
margin-left:2px;
transition:0.2s !important;
 
 
}
 
div.maintitle.clear.clearfix{
background:transparent url("[url=http://pokemmo.eu/images/background-header-footer.png]http://pokemmo.eu/images/background-header-footer.png")[/url]bottom !important;
border:none !important;
text-shadow:2px 2px 0px rgba(0,0,0,0.4) !important;
border-radius:5px !important;
box-shadow:1px 1px 2px rgba(0,0,0,0.5) !important;
}
 
h3.row2{
border-bottom-left-radius:15px !important;
border-bottom-right-radius:15px !important;
background-color:rgb(115,172,227) !important;
color: white !important;
box-shadow:1px 1px 2px rgba(0,0,0,0.5) !important;
 
}
 
div.ipsBox{
padding:0px !important;
}
 
DIV.ipsBox_container.ipsPad{
border-radius:20px !important;
background-color:rgba(255,255,255,0.5) !important;
}
DIV#fast_reply_wrapper.ipsBox{
border-radius:20px !important;
background:none !important;
}
H1.ipsType_subtitle{
font-family:'Dosis', sans-serif !important;
}
 
span.author.vcard{
color:orange !important;
}
 
IMG.ipsUserPhoto.ipsUserPhoto_large{
border:solid 1px orange !important;
border-radius:5px !important;
box-shadow:1.5px 1.5px 2px rgba(0,0,0,0.3) !important;
}
 
#community_app_menu > li > a:hover{
font-size:110% !important;
box-shadow: 1px 1px 0px rgba(0,0,0,0.5) !important;
}
#community_app_menu > li.active > a{
background: transparent url("[url=http://i.imgur.com/u4j6MNg.png]http://i.imgur.com/u4j6MNg.png")[/url]center !important;
}
 
.ipsSideBlock h3{
background:transparent url("[url=http://pokemmo.eu/images/background-header-footer.png]http://pokemmo.eu/images/background-header-footer.png")[/url]bottom !important;
color:white !important;
font-family:'Dosis', sans-serif !important;
 
}
 
 
#content.clearfix{
background:rgba(255,255,255,0.5) !important;
border-radius:20px !important;
 
}
 
DIV.ipsSideBlock.clearfix.__xXrecent20topics{
border-radius:20px !important;
 
 
}
 
A.ipsType_small{
font-size:15px !important;
}
 
H3#anonymous_element_82{
border-radius:10px !important;
background:transparent url("[url=http://pokemmo.eu/images/background-header-footer.png]http://pokemmo.eu/images/background-header-footer.png")[/url]bottom !important;
color:white !important;
}
 
 
#primary_nav.clearfix{
background:transparent url("[url=http://i.imgur.com/wgvMRSL.png]http://i.imgur.com/wgvMRSL.png")[/url]bottom !important;
box-shadow: 0px 5px 5px rgba(0,0,0,0.5) !important;
margin-bottom:5px !important;
height:35px !important;
border-bottom-left-radius:10px !important;
border-bottom-right-radius:10px !important;
 
}
 
div.ipsBox{
background: rgba(255,255,255,0.5) !important;
}
 
.topic_buttons li a{
background: url("[url=http://i.imgur.com/dY1Ru0G.png]http://i.imgur.com/dY1Ru0G.png")[/url]center !important;
border:solid 1px white !important;
box-shadow:none !important;
transition:0.3s !important;
color:pink !important;
}
 
.topic_buttons li a:hover{
color:gold !important;
opacity:0.9 !important;
}
 
td.col_f_content{
background:rgba(255,255,255,0.4) !important;
}
 
div.ipsFilterbar.maintitle{
background:transparent url("[url=http://pokemmo.eu/images/background-header-footer.png]http://pokemmo.eu/images/background-header-footer.png")[/url]bottom !important;
border:none !important;
box-shadow:none !important;
border-radius:5px !important;
text-shadow:2px 2px 0px rgba(0,0,0,0.4) !important;
 
}

Paste it in the code box.


ZPVCgQ3.png


Click the Specify button next to everything.


Select URLs starting with.


Enter https://forums.pokemmo.eu


Click Add.


Give it a name on the left and select Enabled.


r5HQRT5.png


Click Save and then you're done.


[/spoiler]





Opera Tutorial


[spoiler]

why is everything for chrome. brb going to try and make this opera friendly
EDIT: link for opera users
EDIT2: holy shit it actually works: instructions for opera:
1. download the addon
2. click on the thing on the top and click "Manage Styles"
3. click "New"
4. copypasta the script from the op in (or for lazys:[spoiler]Use the code from the Chrome tutorial.

[/spoiler])
6. you can name it, then click out of the box and click save.

YAYAYAYAYAYAYYAYAYAYAYAYYAYAY
EDIT3: you don't need to do the starting with, it automatically does it.
EDIT4: actually you can do the starting with, if you don't want this swankass font for every webpage. click in the box "URL Prefixes" and paste in
https://forums.pokemmo.eu



[/spoiler] Edited by AstroSpud

Share this post


Link to post

 

I took it further this time by making the forums look more like the website.

 

[spoiler]

MFhpQ8o.png

M4FDvYq.png

OwnQuot.png

[/spoiler]

 

  1. Install 'Stylish' extension. Chrome  Firefox.

  2. Install my script. Both (Probably, I dunno. I only tried on Firefox)

 

 

I actually like that design, the forums would look great like that I think. ;o 

Share this post


Link to post

If you could turn this into an IP.Board theme the forums should defiantly use this.

How would I go about doing that?

Share this post


Link to post

well fucking fix it Astro. Jesus.

k i did, geez.

 

They're slightly darker and the text is brighter. Images have been updated. I resized them to be able to upload them onto that download site, but I saved them before i could resize them back to upload to here. so deal with it

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use and Privacy Policy.