Edit menu and News font size

[vostro1400]

Hello Guys,
I am currently running the latest beta 3 and I have tried to do the following but it didnt work

1) Increase News Font size.
2) Increase menu font and style size EG HOME, FORIM, SEARCH

See attachment. I have tried the css but it shows duplicate,,,

_{* News section. */
#inner_wrap .news {
   max-width: 50%;
   float: right;
   padding: 0 0 6px 0;
   font-size: 0.9em;
}
#inner_wrap .news h2, #inner_wrap .news p {
   display: inline;
   padding: 0 0 0 4px;
}}

[Dzonny]

Can you provide us with your forum URL?

For the menu buttons, in css search for:

Code Select Expand

.dropmenu li, #top_info > li
Should be something like that, although when you send us a link we should be able to tell exactly.

[Illori]

if you are using beta 3 from our download section, you should upgrade to beta 4 on github it has many bug fixes.

[vostro1400]

Can you provide us with your forum URL?

For the menu buttons, in css search for:

Code Select Expand

.dropmenu li, #top_info > li
Should be something like that, although when you send us a link we should be able to tell exactly.

Thank you for the reply. We are running it in a closed network intranet. Its only accessible within the network. Below are the code u request.

_{/* Styles for the standard dropdown menus.
------------------------------------------------------- */
.dropmenu, #top_info {
   position: relative;
   box-sizing: border-box;
}
/* Level 1 button background. */
.dropmenu li, #top_info > li {
   display: inline-block;
   margin: 0 2px 0 1px;
   padding: 0 0 0.3em 0;
   font-size: 0.9em;
   line-height: 1.9em;
}
/* For cases where we want to spotlight something specific to an item, e.g. an amount */
.amt {
   margin-left: 3px;
   padding: 0 5px;
   color: white;
   background: #6d90ad;
   border-radius: 8px;
}
.dropmenu li .active .amt, #top_info li .active .amt {
   background: none;
   color: inherit;
}
#top_info .top_menu.visible {
   display: block;
}
/* Needed for new PM notifications. */
.dropmenu li strong {
   color: #333;}

Let me know how this can be achieved.
Both the menu and the news

[Dzonny]

Code Select Expand

/* Level 1 button background. */
.dropmenu li, #top_info > li {
   display: inline-block;
   margin: 0 2px 0 1px;
   padding: 0 0 0.3em 0;
   font-size: 0.9em;
   line-height: 1.9em;
}
change the font-size to your value, you can use pixels, if that suits you.

For the news section, you should find:

Code Select Expand

.sy-slides-crop
and add font-size element there as well, that should do the trick.

[vostro1400]

I have increase the font size of the menu and it worked. However, under slider,min.css i found

                   _{.sy-slides-crop{width:100%;overflow:hidden;}}
which i changed to

                    _{.sy-slides-crop{width:100%;overflow:hidden;font-size: 0.65em}}

it doesn't seem to increase the font size.

[Kindred]

are you using the developer tools in your browser (firefox or chrome, preferably?)
if so... then LOOK at the CSS and see where the sizes are coming from directly... chances are that the font size is not defined where you thing it is and there is some interaction between that container you are looking at and some other location.


Also, don't spend too much time customizing beta3.
A whole bunch has already been modified in the current nightly build on GitHub.

[Dzonny]

Hm, have you tried with value in px? Like 16px for example?
Also try adding font-size in .sy-list class instead.

[vostro1400]

Hm, have you tried with value in px? Like 16px for example?
Also try adding font-size in .sy-list class instead.

I have tried Px. It didnt make any difference

[Dzonny]

Also try adding font-size in .sy-list class instead.

And this?

Also, like Kindred suggested, you may try to use dev tools in your browser to detect exact class and try it before the change. I don't have 2.1 version installed so I can't test what I'm writing, that's why I asked for the forum URL.

[vostro1400]

I have inspected the element and its pointing to Minified.css but however, each time i change it, it changes back on it on.

So when i checked on index.css, i saw the below but increasing font here affects the whole website.

_{body {
   background: #e9eef2;
   font: 83.33%/150% "Segoe UI", "Helvetica Neue", "Nimbus Sans L", Arial, "Liberation Sans", sans-serif;
   color: #4d4d4d;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   min-height: 100vh;}

Any best solution?

[Dzonny]

Yes, changing body affects the general font-size, so changing that is a no-no in this case.

Are you sure that you're saving the right file, and that you cleared cache from your browser (that may be the problem sometimes)?

[vostro1400]

Sure.... its in the minified but whenever i change it and save the file. It will auto regenerate.

_{html{background:#3e5a78}body{background:#e9eef2;font:83.33%/150% "Segoe UI","Helvetica Neue","Nimbus Sans L",Arial,"Liberation Sans",sans-serif;color:#4d4d4d;margin:0;padding:0;display:flex;flex-direction:column;min-height:100vh}p,ul,ol,li,dl,dd,dt,fieldset,form{box-sizing:border-box;padding:0;margin:0}ul,ol{list-style:none}ul.normallist{list-style-type:disc;padding:0 0 0 15px}table{empty-cells:show}input,button,select,textarea,textarea.editor{color:#222;box-sizing:border-box;font:83.33%/150% "Segoe UI","Helvetica Neue","Nimbus Sans L",Arial,"Liberation Sans",sans-serif;background:#fff;outline:none!important;border:1px solid #bbb;vertical-align:middle;border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.05) inset;padding:3px}#chrome input{font:83.33%/150% "Segoe UI","Helvetica Neue",Arial,"Liberation Sans",sans-serif}textarea,textarea.editor{font-size:1em}.sceditor-container textarea,.sceditor-container textarea:focus{box-shadow:none}#}

Once i refresh the page it auto regenerate.

[Illori]

you dont modify it in the minified file, you need to modify it in the normal index.css file and wait for the minified file to be regenerated or disabled the minified css in the admin panel.

[vostro1400]

How can i modify it in the index.css i can't find the exact code.

[SychO]

How can i modify it in the index.css i can't find the exact code.

Search for the class you wish to edit ?

[Dzonny]

I assume you should edit slider.css in this specific case.

[vostro1400]

i have edited slider with
.sy-slides-crop{width:100%;overflow:hidden;font-size: 50px}

but still it does change anything

[SychO]

i have edited slider with
.sy-slides-crop{width:100%;overflow:hidden;font-size: 50px}

but still it does change anything

CTRL+F5 on your forum

[Kindred]

seriously, though....  without actual access to your system/display - or the old beta3 installation, we're just guessing.

the nice thing about the developer toolkits -- you can change the various css right in the took and see what the impact of the changes would be... and then revert by refreshing the page.