To keep your `href` unchanged, add `-noshare` to the network name. When using a network with share url, the `href` attribute will be inserted in the share url (i.e. Title | string | img title attribute | none Src | url | image source | Each social `name` has its own default Text-padding | px | padding around the text | 4px 4px 4px 0 Icon-padding | px | padding around the icon | 0px Padding | px | supports up to 4 parameters | 4px Name | string | social network name, see supported list below | N/A Href | url | button redirection url | none Note that default icons are transparent, which allows `background-color` to actually be the icon color.Īlt | string | image alt attribute | noneīackground-color | color | icon color | Each social `name` has its own default This component enables you to display a given social network inside `mj-social`. Text-decoration | string | underline/overline/none | none Text-padding | px | padding around the texts | 4px 4px 4px 0 Icon-padding | px | padding around the icons | 0px Padding-bottom | px | bottom offset | n/a Padding | px | supports up to 4 parameters | 10px 25px Mode | string | vertical/horizontal | horizontal Line-height | percent/px | space between lines | 22px Inner-padding | px | social network surrounding padding | 4px Icon-size | percent/px | icon size (width and height) | 20px Icon-height | percent/px | icon height, overrides icon-size | icon-size |-|-|-Īlign | string | left/right/center | centerĬss-class | string | class name, added to the root HTML element created | n/aĬontainer-background-color | color | inner element background color | n/aįont-family | string | font name | Ubuntu, Helvetica, Arial, sans-serifįont-style | string | font style | normalįont-weight | string | font weight | normal You can add social networks with the `mj-social-element` tag.Īttribute | unit | description | default value Displays calls-to-action for various social networks with their associated logo. Scrolling up in the CSS bit, I find lots of definition, so I'm going to copy and adjust the relevant -ko-blockdefs Now I need to define the widgets for these things. I notice there's two versions of the content in ➍ - one for the colour version and one for the greyscale one, as toggled with data-ko-display="socialIconType eq 'colors'" I want colour logos, so I don't need that. I notice the TitleBlock markup has the same ➊ and ➋ but the content (➌ and ➍) differs, so I'm going to use that place for my content. The original block has 2 columns, but I don't want that. The Mosaico project has made blocks that work across a range of email clients, so wherever possible we want to follow their markup - it's ugly for a reason: it works that way! I copy the same format for the main HTML bit, so it starts and ends like: I'm going to copy the Social Block, since we can reuse the icons from there.
0 Comments
Leave a Reply. |