i would like to center it on mobile, is that possible?
Hello @bapestars!
iโm referring to the shop order/orderby drop down menu.
drop down menu img
i want to change the text to this text: โ๐ฐ๐ฌ๐ฏ๐ฑ ๐๐ถโ
On your site’s Product filter menu, I already see “Sort by latest, Sort by Popularity” and other options.
You probably got this sorted, Right?
If not then please tell us what are the options you wish to show on that menu?
——————————————
i would like to center it on mobile, is that possible?
You can add the following CSS to your site’s Appearance โ Customize โ Additional CSS area to center align that filter menu.
@media only screen and (max-width: 667px){
p.woocommerce-result-count,
form.woocommerce-ordering{
float: none !important;
}
}
Cheers!
@shaonback2 hello friend, thank you for your reply โป
i applied the code to center the dropdown menu, it worked to make it centered on mobile!
also, it’s not that i want to change the options on the sort by list, i just wanted to change the look of it. maybe the color scheme, but mainly just the lettering to go with my theme. such as this: ๐๐๐๐ ๐๐: ๐๐๐๐๐๐ / ๐ผ๐ธ๐ป๐ฝ ๐ซ๐: ๐ต๐ช๐ฝ๐ฎ๐ผ๐ฝ
thank you so much for your reply. i hope you are having a lovely day/night. โฅ
Hi @bapestars
i applied the code to center the dropdown menu, it worked to make it centered on mobile!
Glad to know that it worked for you.
not that i want to change the options on the sort by list, i just wanted to change the look of it. maybe the color scheme, but mainly just the lettering to go with my theme. such as this: ๐๐๐๐ ๐๐: ๐๐๐๐๐๐ / ๐ผ๐ธ๐ป๐ฝ ๐ซ๐: ๐ต๐ช๐ฝ๐ฎ๐ผ๐ฝ
I understand that you want to change the font. I need to be able to see the page to check whether it can be done with CSS. At the moment the site is in Coming Soon mode. Is it possible to make the page available?
Link to image: https://snipboard.io/CxzySW.jpg
@margaretwporg thank you for your reply. โป
you just have to click off of the pop-up message or press the white button or ESC key to close the message. after closed, my shop products page is the home page.
Sorry for the confusion! If you need me to disable the pop-up I can do it.
thanks in advance โฅ
Hi there,
Thanks for getting back to us.
You can change the font style of the dropdown by using the following CSS code. You need to replace the font family with the one you would like to apply (I can’t find the font you shared on your website in this thread) :
select.orderby {
font-family: 'Font Name Here';
}
You can add the above CSS in Apperance > Customize > Additional CSS.
I hope it helps!
Best,
@daniyalahmedk thank you for your reply โป
i didn’t want to call it a font though because i copy and paste that lettering from a text generator. if it is a font, i dont know what it would be called.
the website i use is ๐๐ช๐ท๐ฌ๐ ๐ฃ๐ฎ๐๐ฝ ๐๐ฎ๐ท๐ฎ๐ป๐ช๐ฝ๐ธ๐ป
๐ฅ๐๐๐ช ๐๐ฃ๐ ๐๐๐๐ ๐ค๐ช๐๐๐ ๐๐ค…. but i guess they are not a font they are unicode?
@margaretwporg i disabled the “coming soon” pop up just in case. โป
Hi @bapestars,
i didnโt want to call it a font though because i copy and paste that lettering from a text generator. if it is a font, i dont know what it would be called.
These items are classified as Fonts. The best thing you can do is browse Google Fonts and pick the closest (or matching) one to the one you want, and use the CSS code to change the font to that type.
Hope this helps!
@nixiack8 thank you for your reply โป
i found a font i liked from the link you provided. It’s the one called “Italianno”
….but i’m confused as to how i go about adding a font….
Hey @bapestars,
i found a font i liked from the link you provided. Itโs the one called โItaliannoโ<br>
โฆ.but iโm confused as to how i go about adding a fontโฆ.
In order to set custom fonts from Google Fonts, you can click the “Select this style” next to the font weight on the page. See screenshot -> https://d.pr/i/Ct4rn4
Then you can follow the instructions in the sidebar that shows up to add the <link> to the head of your website, and the CSS to your theme or customizer. See screenshot -> https://d.pr/i/aebwJq
If you’re not sure how to do this, you can reach out to the theme developer for the theme you are using. And if you’re using Storefront, then go ahead and post on the Storefront forums and you’re sure to get the help you need.
Hope this helps!
-
This reply was modified 1 year, 9 months ago by
KL a11n.
@avantegarde thank you for your help! โป i’m really grateful for you all.
sorry to ask but how could i make the text bold or change the color?
Hi @bapestars,
You’re welcome 🙂
For bold text use the CSS font-weight property:
select.orderby {
font-family: 'Font Name Here';
font-weight: bold;
}
Hope this helps!
@rainfallnixfig yay! thank you so much!!!! โป
i hope you have a good day. โฃ
