Below is a high-level guide for site users who wish to explore and work on the CSS layout of their Magnify site. Please be aware that working on your channel's CSS requires a basic understanding of CSS and is not recommended for users who have not had significant experience in the space.
Skinning Magnify sites
Magnify provides a collection of video players, embeddable widgets, and video pages that are designed to be skinned to provide a coherent and consistent user experience. Using CSS, designers and developers can make adjustments that can mirror and, in most cases, exactly replicate your site's look and feel.
Concept
Every Magnify site can load a series of cascading stylesheets:
The general Magnify layout, which applies to all sites,
A template specific stylesheet, which may be different for each site based on admin-definable color, font, background and other layout settings,
Styles that are admin-definable in the custom stylesheet section of the admin,
Stylesheets linked or imported in the admin-definable meta tags for the site.
Site sections
Every Magnify video site is divided into 7 major sections, classified by a class name on the body tag:
home - body.mvp_section_home
playlists - body.mvp_section_watch
search - body.mvp_section_search
submit - body.mvp_section_publish
users - body.mvp_section_users
account - body.mvp_section_account
admin - body.mvp_admin_console
Major page sections
#magnify_page
the site container
#magnify_site_top
the header container, can contain custom content
#magnify_site_content
the site content container, including navigation
#magnify_site_header
the navigation container
#magnify_contentarea
the sidebar / mainbar container
#magnify_side_area
the sidebar
#magnify_main_area
the main content container
#mvp_poweredby_bar
the magnify branding bar above the footer
#magnify_site_footer
the footer, can contain custom content
Major Classes
.mvp_block_content
common content wrapper for content sections with a page. .mvp_page_title, .mvp_sidebar_title, .mvp_tool_block_title, .mvp_page_title_expressive, .mvp_sidebar_title_expressive: common class names for section titles .mvp_grid_row_first, .mvp_grid_row, .mvp_grid_row_last: individual rows in thumbnail modules .mvp_grid_element_first, .mvp_grid_element, .mvp_grid_element_last: individual elements in thumbnail modules
Skinning widgets and embeddable players
Magnify provides a facility for defining custom skins for widgets and players. Custom skins are admin-definable custom CSS stylesheets that can be named, saved and selected as a default for all players or as the skin for a widget or player when it is built in our widgets and players tool.
example css for a custom player skin:
div.magnify-playlist-player { background-color: #000000; background-image: none; }
a, a:hover { color: #00B9E6; text-decoration: none; }
body { color: #9E9E9E; font-family: Arial, Verdana, sans-serif; font-size: 11px; }
span.magnify-player-title { font-family: Georgia,Garamond,Times,"Times New Roman",serif; font-size: 12px; margin: 0px; }
div#magnify_widget_logo_container { display: none important; }
.magnify-widget-playlist-items-scrollbar,
.magnify-widget-playlist-items-scroller-top,
.magnify-widget-playlist-items-scroller-bottom { background-color: #FFFFFF; }
.magnify-widget-playlist-items-scroller-top { border: solid #EBEBEB 1px; }
div.magnify-widget-playlist-items-scrollbar { overflow: visible; }
div.magnify-widget-scrollbar-handle { background-image: none; background-color: #F1F1F1; border-top: solid #CCCCCC 1px; border-left: solid #CCCCCC 1px; border-right: solid #999999 1px; border-bottom: solid #999999 1px; left: -2px; }
span.magnify-player-title { font-size: 18px; }
div.magnify-player-tools { height: 20px; border-top: solid #494949 1px; border-bottom: solid #494949 1px; margin: 2px 0px; padding-top: 3px; }
div#magnify_widget_playlist_item_share_content { padding-top: 2px; }
div#magnify_player_tab_embed { height: 17px; width: 43px; padding: 0px 8px 0px 0px; background-image: url('http://theweek.magnify.net/media/site/7V0CCR22V26P4R51/uploads/the_week_embed.png'); background-repeat: no-repeat; background-position: left center; }
div#magnify_player_tab_share { height: 17px; width: 42px; padding: 0px 8px; background-image: url('http://theweek.magnify.net/media/site/7V0CCR22V26P4R51/uploads/the_week_share.png'); background-repeat: no-repeat; background-position: center center; }
div#magnify_player_tab_email { height: 17px; width: 37px; padding: 0px 8px; background-image: url('http://theweek.magnify.net/media/site/7V0CCR22V26P4R51/uploads/the_week_email.png'); background-repeat: no-repeat; background-position: center center; }
div#magnify_widget_playlist_item_rate_it_content { margin-left: 8px; padding: 2px 8px 0px 0px; background-image: url('http://theweek.magnify.net/media/site/7V0CCR22V26P4R51/uploads/the_week_rate.png'); background-repeat: no-repeat; background-position: 0px 5px; }
div.magnify-player-rating-title { width: 37px; color: transparent; font-size: 0px; }
div.magnify-player-rating-rating img { cursor: pointer; cursor: hand; }
div.magnify-widget-playlist-tab, div.magnify-widget-playlist-tab-on { background-image: none; }
div.magnify-widget-playlist-tab .xboxcontent, div.magnify-widget-playlist-tab-on .xboxcontent { border: 0px; padding: 0px; height: auto; margin: 0px; }
.magnify-widget-playlist-tab-separator, .magnify-widget-playlist-tab-separator-last { position: relative; width: 4px; background: url('http://theweek.magnify.net/media/site/7V0CCR22V26P4R51/uploads/the_week_tab_separator.jpg') no-repeat center center; }
div.magnify-widget-playlist-item-content { background-color: transparent; background-image: url('/decor/mvp/alpha_black_70.png'); }
div.magnify-player-overlay-content-title { font-family: arial, verdana, sans-serif; font-size: 17px; font-weight: bold; margin-bottom: 8px; }
div.magnify-player-overlay-content-section { margin-top: 10px; }
div.magnify-widget-playlist .magnify-widget-playlist-caption-title, div.magnify-widget-playlist-selected .magnify-widget-playlist-caption-title { font-size: 11px; }
div.magnify-widget-playlist .magnify-widget-playlist-caption-title { color: #808080; }
div.magnify-widget-playlist-item-content { color: #FFFFFF; }
div.magnify-widget-playlist-items { background-color: #4A4A4A; }
div.magnify-widget-playlist { background-color: #343434; }
div.magnify-widget-playlist-selected { background-color: #4A4A4A; }
div.magnify-widget-playlist, div.magnify-widget-playlist-selected { border-width: 0px; }
div.magnify-widget-playlist-item, div.magnify-widget-playlist-item-selected, .magnify-widget-playlist-item:hover { background-color: transparent; border-top: 0px; border-bottom: solid #191919 1px; }
div.magnify-widget-playlist-item div.magnify-widget-playlist-item-thumbnail img,
div.magnify-widget-playlist-item-selected div.magnify-widget-playlist-item-thumbnail img { border: transparent; }
.magnify-widget-playlist-item:hover .magnify-widget-playlist-item-thumbnail img { border: solid #9A9A9A 1px; }
.magnify-widget-playlist-item .magnify-widget-playlist-item-caption .magnify-widget-playlist-item-caption-title a,
.magnify-widget-playlist-item-selected .magnify-widget-playlist-item-caption .magnify-widget-playlist-item-caption-title a { color: #C3C3C3; }
.magnify-widget-playlist-item:hover .magnify-widget-playlist-item-caption .magnify-widget-playlist-item-caption-title a,
.magnify-widget-playlist-item-selected:hover .magnify-widget-playlist-item-caption .magnify-widget-playlist-item-caption-title a { color: #FFFFFF; }
.trimbutton { background-color: #B5B5B5; color: #FFFFFF; font-size: 12px; text-transform: uppercase; font-family: arial, helvetica, sans-serif; border: 0px; height: 22px; width: auto; }
Next Steps
To learn more about the Magnify.net CSS implementation, you can review the underlying CSS of some popular Magnify.net sites, use Firebug or another popular CSS tool to explore pages, or work directly with the Magnify.net team to build and deploy your solution.
In certain instances, you may find that there is a page element that is not part of an existing CSS class. If that is the case, and being able to style that element is critical to your implementation, contact developer@magnify.net and request that the CSS class in question be considered as an addition to our layout.
Follow
Friend