DIR Return Create A Forum - Home
---------------------------------------------------------
Create A Forum - Support Forums
HTML https://support.createaforum.com
---------------------------------------------------------
*****************************************************
DIR Return to: Guides and Tutorials
*****************************************************
#Post#: 18639--------------------------------------------------
[Tutorial] How to make your Forum RESPONSIVE
By: Egbune Date: June 14, 2017, 7:11 pm
---------------------------------------------------------
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".
[b]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.
#Post#: 18641--------------------------------------------------
Re: [Tutorial] How to make your Forum RESPONSIVE
By: Egbune Date: June 14, 2017, 8:07 pm
---------------------------------------------------------
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]/* 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(
HTML https://www.createaforum.com/themes/default/images/theme/backdrop.png)<br
/>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(
HTML https://www.createaforum.com/themes/default/images/theme/submit_bg.png)<br
/>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(
HTML https://www.createaforum.com/themes/default/images/theme/submit_bg.png)<br
/>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[/code]
#Post#: 18990--------------------------------------------------
Re: [Tutorial] How to make your Forum RESPONSIVE
By: Atkisson Date: October 8, 2017, 5:45 am
---------------------------------------------------------
Nicely put together tutorial Egbune. I'll give it a try. Thanks
for sharing.
#Post#: 20531--------------------------------------------------
Re: [Tutorial] How to make your Forum RESPONSIVE
By: DocZaius Date: August 14, 2018, 11:03 am
---------------------------------------------------------
This is neat, but it doesn't really make the forum truly
responsive.
#Post#: 24603--------------------------------------------------
Re: [Tutorial] How to make your Forum RESPONSIVE
By: TheNetheriteMinecart Date: October 18, 2021, 6:07 pm
---------------------------------------------------------
uh whats a responsive forum?
*****************************************************