Author Topic: [Tutorial] How to make your Forum RESPONSIVE  (Read 921 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
Re: [Tutorial] How to make your Forum RESPONSIVE
« 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

 

Related Topics

  Subject / Started by Replies Last post
0 Replies
1162 Views
Last post January 20, 2012, 04:24:37 pm
by The_Original_Modifier
7 Replies
524 Views
Last post February 26, 2016, 02:08:23 pm
by CreateAForum
0 Replies
681 Views
Last post April 24, 2016, 02:42:01 pm
by mememe
4 Replies
725 Views
Last post August 14, 2018, 04:09:08 pm
by CreateAForum
0 Replies
839 Views
Last post March 14, 2020, 03:51:08 pm
by flhub