Author Topic: [Tutorial] How to make your Forum RESPONSIVE  (Read 400 times)

0 Members and 0 Guests are viewing this topic.

Offline Egbune

  • Newbie
  • *
  • Posts: 49
  • Karma: 0
  • Gender: Male
  • Location: Nigeria
    • View Profile
    • Nigerian Area Forum
[Tutorial] How to make your Forum RESPONSIVE
« on: June 15, 2017, 12:11:13 am »
Hey guys, just started coding of recent and found out something cool on css.

Now the topic title says it all. To make SMF/Createaforum Forum fit to any size of screen just follow the below steps.
1. Login
2. Login to your admin Area
Navigate to style manager in the Admin Center
4. Click on create a new style
5. Title the New css with your preferred name
6. Now, navigate to the section of the template where it says "/*This division wraps the entire forum*/
7. In the padding setting of this section, leave it at "15px".
8. For the min. width, clear the default value and replace it with "responsive"
9. For max. width, clear the default value and replace it with "responsive"
10. Click save and wait like a minute for the effect to take place

Like I said at the beginning of the post, I just started this so criticize properly. If you have issues, comment here and CAF might attend to you or I will.

Note: I dont think this setting works for all Ready made templates by CAF, but it works for the default template.
« Last Edit: June 15, 2017, 12:34:57 am by Egbune »

Social Buttons


Offline Egbune

  • Newbie
  • *
  • Posts: 49
  • Karma: 0
  • Gender: Male
  • Location: Nigeria
    • View Profile
    • Nigerian Area Forum
Re: [Tutorial] How to make your Forum RESPONSIVE
« Reply #1 on: June 15, 2017, 01:07:12 am »
Ohh, sorry for the pause cause that's not all.

11. In the same stylesheet, navigate to "/* Set a fontsize that will look the same in all browsers. */".
12. Uder that section of the css, you will see the 'Font' area with two values in percent (%), now replace them with 200% and 150% respectively
13. Still in the same section, you will see the 'padding area'. Now reset the values there with '0 auto"
14. Now you can save.

Note: This technigque is good for high-end browsers and computers.
Still having issues, copy my code below:
Code: [Select]
/* Styles for the general looks for the Curve theme.
------------------------------------------------------- */

/* Normal, standard links. */
a:link, a:visited
{
color: #346;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
cursor: pointer;
}

/* Links that open in a new window. */
a.new_win:link, a.new_win:visited
{
color: #346;
text-decoration: none;
}
a.new_win:hover
{
text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
empty-cells: show;
}

/* Set a fontsize that will look the same in all browsers. */
body
{
background: #E9EEF2 url(https://www.createaforum.com/themes/default/images/theme/backdrop.png) repeat-x;
font: 200%/150% "Arial Black", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 0 auto;
}

/* Help popups require a different styling of the body element. */
body#help_popup
{
padding: 1em;
}

/* use dark grey for the text, leaving #000 for headers etc */
body, td, th, tr
{
color: #444;
}

/* This division wraps the entire forum when a forum width is set. */
div#wrapper
{
margin: 15px;
min-width: responsive;
max-width: responsive;
}

/* lets give all forms zero padding/margins */
form
{
padding: 0;
margin: 0;
}

/* We can style the different types of input buttons to be uniform throughout different browsers and their color themes.
.button_submit - covers input[type=submit], input[type=button], button[type=submit] and button[type=button] in all browsers
.button_reset  - covers input[type=reset] and button[type=reset] throughout all browsers
.input_check   - covers input[type=checkbox] throughout all browsers
.input_radio   - covers input[type=radio] throughout all browsers
.input_text    - covers input[type=text] throughout all browsers
.input_file    - covers input[type=file] throughout all browsers
*/

input, button, select, textarea
{
font: 95%/115% verdana, Helvetica, sans-serif;
color: #000;
background: #fff;
border: 1px solid #7f9db9;
padding: 2px;
}

/* Select elements look horrible with the extra padding, so leave them unpadded. */
select
{
padding: 0;
}

/* Add some padding to the options instead. */
select option
{
padding: 1px;
}

/* The font size of textareas should be just a little bit larger. */
textarea
{
font: 100%/130% verdana, Helvetica, sans-serif;
}

/* Buttons should be styled a bit differently, in order to make them look more button'ish. */
.button_submit, .button_reset
{
background: #cde7ff url(https://www.createaforum.com/themes/default/images/theme/submit_bg.png) no-repeat;
border: 1px solid #aaa;
cursor: pointer;
font-weight: normal;
}
input:hover, textarea:hover, button:hover, select:hover
{
border: 1px solid #454545;
}
.button_submit:hover, .button_reset:hover
{
border: 1px solid #aaa;
background: url(https://www.createaforum.com/themes/default/images/theme/submit_bg.png) no-repeat 0 -140px #cde7ff;
}
input:focus, textarea:focus, button:focus, select:focus
{
border: 1px solid #454545;
}

/* All input elements that are checkboxes or radio buttons shouldn't have a border around them. */
input.input_check, input.input_radio
{
border: none;
background: none;
}
h3.catbg input.input_check
{
margin: 9px 7px 0 7px;
}

/* Give disabled text input elements a different background color. */
input[disabled].input_text
{
background-color: #eee;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #ccc;
background-color: #ccc;
}

/* By default set the color on these tags as #000. */
h1, h2, h3, h4, h5, h6
{
color: #000;
font-size: 1em;
margin: 0;
padding: 0;
}

/* Fieldsets are used to group elements. */
fieldset
{
border: 1px solid #c4c4c4;
padding: 1em;
margin: 0 0 0.5em 0;
}
fieldset legend
{
font-weight: bold;
color: #444;
}
/* No image should have a border when linked. */
a img
{
border: 0;
}

/* Define strong as bold, and em as italics */
strong
{
font-weight: bold;
}

em
{
font-style: italic;
}
/* Alternative for u tag */
.underline
{
text-decora

Offline Atkisson

  • Newbie
  • *
  • Posts: 1
  • Karma: 0
    • View Profile
Re: [Tutorial] How to make your Forum RESPONSIVE
« Reply #2 on: October 08, 2017, 10:45:18 am »
Nicely put together tutorial Egbune. I'll give it a try. Thanks for sharing.

Offline DocZaius

  • Newbie
  • *
  • Posts: 2
  • Karma: 0
    • View Profile
Re: [Tutorial] How to make your Forum RESPONSIVE
« Reply #3 on: August 14, 2018, 04:03:54 pm »
This is neat, but it doesn't really make the forum truly responsive.

 

Related Topics

  Subject / Started by Replies Last post
0 Replies
1101 Views
Last post January 20, 2012, 04:24:37 pm
by The_Original_Modifier
0 Replies
1139 Views
Last post November 12, 2012, 05:21:01 am
by Libinbabu53
7 Replies
393 Views
Last post February 26, 2016, 02:08:23 pm
by CreateAForum
0 Replies
590 Views
Last post April 24, 2016, 02:42:01 pm
by mememe
4 Replies
377 Views
Last post August 14, 2018, 04:09:08 pm
by CreateAForum