News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

UI.S

Started by gecitli, September 18, 2021, 05:08:37 PM

Previous topic - Next topic

TwitchisMental

Quote from: Steve on January 11, 2023, 06:09:25 AMWould minimize files affect this?
Yep, didn't even think of that.. If you do have the minimize css and js option enabled it could effect this for sure.



downtromthoi

Help me with this. Where can I let it show up? I used ST-Shop mod
You cannot view this attachment.

Survivor1989

hi thank you for helping for for this theme (UIS)
now i fix my problemes and just 1 more i have problme.

my problme is notifications.
for example : someone like my post,add me to friend or........
a notification send for me But I can't see it completely.
This problem is the style of the template codes
You will see what I mean in the picture
I just want to move notification window a little to the right so it's fully visible
plz help me i fix this


thank you ♥


You cannot view this attachment.
Rise UP SMF ♥

TwitchisMental

#43
Quote from: Survivor1989 on January 21, 2023, 06:47:49 AMhi thank you for helping for for this theme (UIS)
now i fix my problemes and just 1 more i have problme.

my problme is notifications.
for example : someone like my post,add me to friend or........
a notification send for me But I can't see it completely.
This problem is the style of the template codes
You will see what I mean in the picture
I just want to move notification window a little to the right so it's fully visible
plz help me i fix this


thank you ♥


Screenshot 2023-01-21 at 15-02-51 تنظیمات قالب.jpg
This is most likely caused by your language being RTL and the styling of that section being made for LTR.

Open responsive.css

Find -
.dropdown-menu-right {
    right: 0;
    left: auto;
}


Replace With -

.dropdown-menu-right {
    left: 0;
    right: auto;
}

Survivor1989

#44
Quote from: TwitchisMental on January 21, 2023, 12:23:13 PM
Quote from: Survivor1989 on January 21, 2023, 06:47:49 AMhi thank you for helping for for this theme (UIS)
now i fix my problemes and just 1 more i have problme.

my problme is notifications.
for example : someone like my post,add me to friend or........
a notification send for me But I can't see it completely.
This problem is the style of the template codes
You will see what I mean in the picture
I just want to move notification window a little to the right so it's fully visible
plz help me i fix this


thank you ♥


Screenshot 2023-01-21 at 15-02-51 تنظیمات قالب.jpg
This is most likely caused by your language being RTL and the styling of that section being made for LTR.

Open responsive.css

Find -
.dropdown-menu-right {
    right: 0;
    left: auto;
}


Replace With -

.dropdown-menu-right {
    left: 0;
    right: auto;
}

hi
i check my responsive.css and i find this code

.dropdown-menu-right {
    left: 0;
    right: auto;
}

i change to left but still have problme (It goes to the left again)
i use right and still have problme.

im so sorry but i send my index.css and responsive.css just cant see my files and where is problme

Please use code tags when posting code. ~ Steve
Rise UP SMF ♥

Steve

Please do not double post. I've moved your other post to the Support board.
DO NOT pm me for support!

Survivor1989

hi SMF
i have 2 new problme in my theme. plz help me.
and thnaks to all members for helping me fo everyting

1. In the posts, the text is too close to the image (I specified it in the attached image). I want to slightly increase the distance between the text and the image

2. I want to change the orange color (I showed in the attached image) which file or code should be changed

♥♥♥
Rise UP SMF ♥

Kindred

browser inspector - find the css that controls that section and modify it . :D
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Survivor1989

You should keep in mind that we are beginners and we are here for guidance
If I knew the solution or the code I wouldn't have asked for help
Rise UP SMF ♥

Kindred

...  and we are here to teach you how to fish - not to just catch, cook and serve the fish for you. :P

Use your browser inspector tool on the sections you want to change.
That will tell you the CSS code, the file and the line number....
you can even try out different changes in the inspector to see what they look like without changing the actual server hosted file.

in the case of the image -- you would want to find the specific css, and then add padding or margin (in pixels)
in the case of the bar graphs -- you would want to find the specific css, and then change the background-color value (hex-code html color notation format)
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Survivor1989

Quote from: Kindred on January 24, 2023, 11:46:54 AM...  and we are here to teach you how to fish - not to just catch, cook and serve the fish for you. :P

Use your browser inspector tool on the sections you want to change.
That will tell you the CSS code, the file and the line number....
you can even try out different changes in the inspector to see what they look like without changing the actual server hosted file.

in the case of the image -- you would want to find the specific css, and then add padding or margin (in pixels)
in the case of the bar graphs -- you would want to find the specific css, and then change the background-color value (hex-code html color notation format)

This is exactly my problem
I don't know which code to look for and edit
I know how to check the files with the browser, but I don't know what the corresponding code part is
Rise UP SMF ♥

Kindred

that's why I am saying, use your browser inspector!

right click on the section you want to look at and choose "Inspect"

you don't need to edit CODE... only css
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

TwitchisMental

Quote from: Survivor1989 on January 24, 2023, 12:29:06 PM
Quote from: Kindred on January 24, 2023, 11:46:54 AM...  and we are here to teach you how to fish - not to just catch, cook and serve the fish for you. :P

Use your browser inspector tool on the sections you want to change.
That will tell you the CSS code, the file and the line number....
you can even try out different changes in the inspector to see what they look like without changing the actual server hosted file.

in the case of the image -- you would want to find the specific css, and then add padding or margin (in pixels)
in the case of the bar graphs -- you would want to find the specific css, and then change the background-color value (hex-code html color notation format)

This is exactly my problem
I don't know which code to look for and edit
I know how to check the files with the browser, but I don't know what the corresponding code part is
To be fair, Kindred is just trying to help you be able to do simple edits like this yourself :) . CSS isn't really code nor is it hard to learn.

This is more of a personalization request and not really fixing issues.

So for example with the orange bars.

I right clicked the bar > hit the inspect option > seen the following -

.generic_bar .bar, .progress_bar .bar {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    background: orange;
    transition: width .3s;
    border-radius: 1px;
    box-shadow: 4px -4px 8px rgba(0, 0, 0, 0.1) inset,
        4px 4px 8px rgba(255,255,255,0.3) inset;
    display: block;
}

Which is found on line 2243.

So if you want to change the orange part, you are after the background: orange; .

You would change it to the color you want.

Now it looks like you have minimized files on, I would suggest disabling this so when you make the edits to your index.css and refresh, you can see the changes.

Admin CP > Configuration > Features & Options > General > uncheck "  Minimize CSS and JavaScript files "

Survivor1989

Quote from: TwitchisMental on January 24, 2023, 01:28:35 PM
Quote from: Survivor1989 on January 24, 2023, 12:29:06 PM
Quote from: Kindred on January 24, 2023, 11:46:54 AM...  and we are here to teach you how to fish - not to just catch, cook and serve the fish for you. :P

Use your browser inspector tool on the sections you want to change.
That will tell you the CSS code, the file and the line number....
you can even try out different changes in the inspector to see what they look like without changing the actual server hosted file.

in the case of the image -- you would want to find the specific css, and then add padding or margin (in pixels)
in the case of the bar graphs -- you would want to find the specific css, and then change the background-color value (hex-code html color notation format)

This is exactly my problem
I don't know which code to look for and edit
I know how to check the files with the browser, but I don't know what the corresponding code part is
To be fair, Kindred is just trying to help you be able to do simple edits like this yourself :) . CSS isn't really code nor is it hard to learn.

This is more of a personalization request and not really fixing issues.

So for example with the orange bars.

I right clicked the bar > hit the inspect option > seen the following -

.generic_bar .bar, .progress_bar .bar {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    background: orange;
    transition: width .3s;
    border-radius: 1px;
    box-shadow: 4px -4px 8px rgba(0, 0, 0, 0.1) inset,
        4px 4px 8px rgba(255,255,255,0.3) inset;
    display: block;
}

Which is found on line 2243.

So if you want to change the orange part, you are after the background: orange; .

You would change it to the color you want.

Now it looks like you have minimized files on, I would suggest disabling this so when you make the edits to your index.css and refresh, you can see the changes.

Admin CP > Configuration > Features & Options > General > uncheck "  Minimize CSS and JavaScript files "


hi.Thank you and of course for our good friend MR.Kindred

Solved about the colors of orange
Most I mean the problem # 1. I can't find the code corresponding to it that slightly between the image and the text
Rise UP SMF ♥

TwitchisMental

Quote from: Survivor1989 on January 25, 2023, 02:37:52 AM
Quote from: TwitchisMental on January 24, 2023, 01:28:35 PM
Quote from: Survivor1989 on January 24, 2023, 12:29:06 PM
Quote from: Kindred on January 24, 2023, 11:46:54 AM...  and we are here to teach you how to fish - not to just catch, cook and serve the fish for you. :P

Use your browser inspector tool on the sections you want to change.
That will tell you the CSS code, the file and the line number....
you can even try out different changes in the inspector to see what they look like without changing the actual server hosted file.

in the case of the image -- you would want to find the specific css, and then add padding or margin (in pixels)
in the case of the bar graphs -- you would want to find the specific css, and then change the background-color value (hex-code html color notation format)

This is exactly my problem
I don't know which code to look for and edit
I know how to check the files with the browser, but I don't know what the corresponding code part is
To be fair, Kindred is just trying to help you be able to do simple edits like this yourself :) . CSS isn't really code nor is it hard to learn.

This is more of a personalization request and not really fixing issues.

So for example with the orange bars.

I right clicked the bar > hit the inspect option > seen the following -

.generic_bar .bar, .progress_bar .bar {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    background: orange;
    transition: width .3s;
    border-radius: 1px;
    box-shadow: 4px -4px 8px rgba(0, 0, 0, 0.1) inset,
        4px 4px 8px rgba(255,255,255,0.3) inset;
    display: block;
}

Which is found on line 2243.

So if you want to change the orange part, you are after the background: orange; .

You would change it to the color you want.

Now it looks like you have minimized files on, I would suggest disabling this so when you make the edits to your index.css and refresh, you can see the changes.

Admin CP > Configuration > Features & Options > General > uncheck "  Minimize CSS and JavaScript files "


hi.Thank you and of course for our good friend MR.Kindred

Solved about the colors of orange
Most I mean the problem # 1. I can't find the code corresponding to it that slightly between the image and the text
Try adding this to the bottom of the index.css -

.post img {
  padding: 10px;
}


Survivor1989

hi smf.
and tanks to all members for helping me

I want the label image of users to be shown in their profile. (their user stars). Currently only displayed under the avatar on the posts page. I remember a few years ago there was a plugin whose job was to show the user's label in the profile

Please advise
Rise UP SMF ♥

Steve

I you talking about just this theme or all themes?
DO NOT pm me for support!

Advertisement: