Profile Block - Can i change font,color, size in ?

yale1971 · June 10, 2016

Hello
i put my profile block with cover & icon inside my new Guest-book page :
http://www.yannicklefevre.com/Guest-Book

but i didn't like the size on the main text ( Yannick Lefevre )
so i would like change the size, font and perhaps colors on this ...

I try it but i'm wrong ( i need to learn with CSS ) :

.sm-page-widget-profile-name h1

.sm-title-xl {
font-family: Arial
font-size: 18px !important;
color: #ffffff !important;
}

So that is the correct CSS custom ....
Thank U for your help
Take care
Yan

denisegoldberg · June 10, 2016

I'm not sure where you came up with the element names. When I used FireBug (http://getfirebug.com/) and pointed at your name in the profile block the element name was different.

In addition, CSS is syntax. If there are multiple entries in the CSS specifications each entry must be terminated with a semicolon (;). Only the last entry can have no termination. And if there are multiple CSS elements that are targeted, those must be separated with commas (,).

This will change the font type, size, and color:

.sm-page-widget-profile-v2-name  {
  font-family: Arial;
  font-size: 18px !important;
  color: yellow !important;

}

Color can be specified as a name or as a hex color code.

--- Denise

photoclick · June 10, 2016

sm-page-widget-profile-v2-name {
font-family: FONTNAME;
font-size: NUMBERpx !important;
color: #COLORCODE !important;
}

yale1971 · June 10, 2016

denisegoldberg wrote: »
I'm not sure where you came up with the element names. When I used FireBug (http://getfirebug.com/) and pointed at your name in the profile block the element name was different.

In addition, CSS is syntax. If there are multiple entries in the CSS specifications each entry must be terminated with a semicolon (;). Only the last entry can have no termination. And if there are multiple CSS elements that are targeted, those must be separated with commas (,).

This will change the font type, size, and color:
.sm-page-widget-profile-v2-name  {
  font-family: Arial;
  font-size: 18px !important;
  color: yellow !important;

}
Color can be specified as a name or as a hex color code.

--- Denise

Hi Denise,
i don't use firefox and if i understand well, Firebug works only with Firefox ? I use Safari with my iMac
Thank U for this quick learn about CSS
and as usually, it works well now ;-)
Regards
Yan

yale1971 · June 10, 2016

photoclick wrote: »

sm-page-widget-profile-v2-name {
font-family: FONTNAME;
font-size: NUMBERpx !important;
color: #COLORCODE !important;
}

Hi Michael,
Thank U for your help
it works well now !
Regards
Yan

denisegoldberg · June 10, 2016

yale1971 wrote: »

i don't use firefox and if i understand well, Firebug works only with Firefox ? I use Safari with my iMac

I believe Firefox can be installed on a mac. It might be worth installing a second browser in order to have access to tools.

--- Denise

yale1971 · June 10, 2016

denisegoldberg wrote: »

I believe Firefox can be installed on a mac. It might be worth installing a second browser in order to have access to tools.

--- Denise

i do it :-)

Lille Ulven · June 10, 2016

Denise is right, Firefox can be installed on a Mac. But you also can activate the Developer Tools in Safari. For this to happen go on like this:
1. Click on Safari from the menu line
2. Click on Settings
3. in the opening window choose the "extended" tab (furthest to the right with the crank symbol)
4. In the bottom of that tab activate "Show Menu Developer in Menu line" (or what ever they called it in English...last checkbox on that side)

In many occasions I do like Firebux better, but the Safari Developer has the opportunity to show how a website looks like in different browsers, which works not too bad.

Anyway: you should install multiple browsers if you are customizing your website in anyway, this because different browsers show things in different ways, so you would want to test if all your changes work in every browser or if you need to add special code to make them work. For example if you took a look at my blog in Safari and opened for example this article: http://blog.lilleulven.com/2016/06/the-scandinavian-adventure-flam.html you will see an initial letter, if you open the same page in any other browser, you will at this point in time not see that initial letter because no other browser supports that initial-letter CSS yet.

Good luck

Lille Ulven

Smug Eric · June 10, 2016

Yeah to kind of mirror what everyone else has been saying, for the years I've been using SmugMug I normally work on sites in Chrome. Then I'll switch to check them in Firefox which I've never logged in on so I get a proper visitors view of the site. And to see if any of the work I did in Chrome doesn't play nicely in Firefox. But most browsers these days have some kind of developer tools built in, of varying ease of use and readability.

Profile Block - Can i change font,color, size in ?

Comments