Mode
Production
Development
English
Spanish
French
Arabic
Home
Manage
Members
Member Levels
Networks
Announcements
Email All Members
Abuse Reports
Manage Invites
Manage Tags
Manage Comments
Manage Verifications
Support Inbox
Settings
General Settings
Locale Settings
Profile Questions
Signup Process
Activity Feed Settings
Emoticons
Social Menus
Spam & Banning Tools
Mail Templates
Friendship Settings
Mail Settings
Performance & Caching
Admin Password
Task Scheduler
Iframely Integration
Default Notification Alerts
Default Email Alerts
Storage System
Redirection Settings
TinyMCE Editor Settings
Plugins
Appearance
Layout Editor
Theme Editor
File & Media Manager
Language Manager
Menu Editor
Banner Manager
Monetization
Ads
Member Subscription Settings
Billing Settings
Orders
Stats
Site-wide Statistics
Referring URLs
Server Information
Log Browser
Harmony Theme
Network Information
Created
January 11, 2020
Version
6.5.1
Home
Appearance
Theme Editor
Theme Editor
More info:
See KB article
Active Theme
Revert
Clone
Save Changes
Harmony
v6.5.1
by SocialEngine Core
Editing File:
theme.css
constants.css
harmony-custom.css
/* $Id:constants.css 7306 2010-09-07 07:33:09Z john $ */ /* DEFAULT STYLES FOR THIS THEME */ @constants { /* NOTE TO SELVES --------------------------------------------------------------- Also add constants to application/settings/constants.xml END NOTE --------------------------------------------------------------------- */ /* PAGE WIDTHS & BACKGROUND COLOR Specify the top bar wrapper width (which contains the mini menu, logo, and main menu by default), the footer width, and the width of left & right-side columns. */ theme_main_width:1200px; theme_topbar_width:$theme_main_width; theme_topbar_minimenu_width:auto; theme_topbar_logo_width:auto; theme_topbar_menu_width:100%; theme_footer_width:$theme_main_width; theme_content_width:$theme_main_width; theme_content_columns_left_width:300px; theme_content_columns_right_width:300px; theme_body_background_color:$harmony_body_background_color; theme_color:$harmony_theme_color; theme_base_color:$harmony_theme_color; /* HEADER AND FOOTER COLORS These values are only used to style the site-wide header and footer. */ theme_topbar_background_color:$harmony_header_background_color; theme_topbar_menu_background_color:$harmony_mainmenu_background_color; theme_topbar_menu_background_color_hover:transparent; theme_topbar_menu_link_color:$harmony_mainmenu_links_color; theme_topbar_menu_link_decoration:none; theme_topbar_menu_link_hover_color:$harmony_mainmenu_links_hover_color; theme_topbar_menu_link_hover_decoration:none; theme_topbar_menu_link_size:$harmony_mainmenu_fontsize; theme_topbar_menu_link_background_color:transparent; theme_topbar_menu_link_background_color_hover:transparent; theme_topbar_menu_font_family:$harmony_mainmenu_fontfamily; theme_topbar_menu_border:none; theme_topbar_minimenu_border:none; theme_topbar_minimenu_link_size:100%; theme_topbar_minimenu_link_color:$harmony_minimenu_links_color; theme_topbar_minimenu_link_background_color:$harmony_minimenu_links_background_color; theme_topbar_minimenu_signup_background_color:$harmony_minimenu_signup_background_color; theme_topbar_minimenu_signup_font_color:$harmony_minimenu_signup_font_color; theme_topbar_minimenu_link_hover_decoration:none; theme_topbar_minimenu_link_hover_background_color:transparent; theme_topbar_border:0px solid transparent; theme_header_search_background_color:$harmony_minimenu_search_background_color; theme_header_search_font_color:$harmony_minimenu_search_font_color; theme_footer_background_color:$harmony_footer_background_color; theme_footer_font_color:$harmony_footer_font_color; theme_footer_link_color:$harmony_footer_links_color; theme_footer_border_color:$harmony_footer_border_color; /* TEXT & LINKS These values affect the size and colors of your text and links throughout your layout. */ theme_body_font_size:$harmony_body_fontsize; theme_font_family:$harmony_body_fontfamily; theme_font_size_small:0.85em; theme_font_color:$harmony_font_color; theme_font_color_light:$harmony_font_color_light; theme_text_align:left; theme_link_color:$harmony_links_color; theme_link_color_hover:$harmony_links_hover_color; theme_link_decoration:none; theme_link_decoration_hover:none; theme_headline_color:$harmony_headline_color; theme_headline_size_large:165%; theme_headline_size_medium:140%; /* BORDER COLORS These colors are mostly applied to borders that separate items in lists of content. */ theme_border_color:$harmony_border_color; theme_border_medium_color:$harmony_border_color; theme_border_dark_color:$harmony_border_color; /* WIDGET BOX BORDER COLORS These colors are applied to borders around or within boxes that have a background color, like widgets. */ theme_box_header_font_size:$harmony_heading_fontsize; theme_box_header_font_family:$harmony_heading_fontfamily; theme_foreground_border_color:transparent; theme_foreground_border_color_light:transparent; theme_foreground_background_color:$harmony_box_background_color; theme_comments_background_color:$harmony_comments_background_color; /* INPUT FIELDS AND BUTTONS These values style input fields and buttons that appear throughout the layout. */ theme_input_background_color:$harmony_input_background_color; theme_input_font_color:$harmony_input_font_color; theme_input_border_colors:$harmony_input_border_color; theme_button_background_color:$harmony_button_background_color; theme_button_background_color_hover:$harmony_button_background_color_hover; theme_button_background_color_active:$harmony_button_background_color_hover; theme_button_font_color:$harmony_button_font_color; theme_button_border_color:$harmony_button_background_color; /* PHOTO BORDERS These colors are applied to the borders drawn around most images and thumbnails. */ theme_photo_border_color:#e2e4e6; theme_photo_border_color_hover:#d8dbe2; /* FORMS These colors are applied to most forms throughout the layout. */ theme_form_border_color:transparent; theme_form_background_color:transparent; theme_form_label_font_color:$harmony_form_label_color; /* TABS (BUTTON-STYLE) These colors are applied to the button-style tab menus which are often shown on browse pages. */ theme_buttontabs_font_family:$harmony_tab_fontfamily; theme_buttontabs_font_color:$harmony_font_color; theme_buttontabs_font_color_hover:$harmony_button_background_color; theme_buttontabs_font_color_active:$harmony_button_font_color; theme_buttontabs_background_color:$harmony_box_background_color; theme_buttontabs_background_color_active:$harmony_button_background_color; theme_buttontabs_border_color:transparent; theme_buttontabs_border_color_active:$harmony_theme_color; /* TABS These colors are applied to tab menus (as seen on several pages, including the member profile page). */ theme_tabs_background_color:$harmony_box_background_color; theme_tabs_background_active_color:$harmony_button_background_color; theme_tabs_border_color:transparent; theme_tabs_border_color_hover:$harmony_font_color; theme_tabs_font_color:$harmony_font_color; theme_tabs_font_color_active:$harmony_button_font_color; theme_tabs_border_color_active:$harmony_button_background_color; theme_tabs_font_family:$harmony_tab_fontfamily; theme_tabs_font_size:$harmony_tab_fontsize; /* LISTS These colors are applied to some lists, especially in pull-down menus. */ theme_list_background_color:$harmony_box_background_color; theme_list_background_color_alt:$harmony_box_background_color_alt; theme_list_background_color_hover:$harmony_box_background_color_alt; /* TAGS These colors are applied to tags, which appear on blogs, messages, etc. */ theme_tag_background_color:rgba(0, 0, 0, .1); /* INLINE PULLDOWN MENUS These colors style the inline pulldown menus that appear throughout the layout. */ theme_pulldown_background_color:$harmony_box_background_color; theme_pulldown_background_color_hover:$harmony_theme_color; theme_pulldown_background_color_active:$harmony_theme_color; theme_pulldown_font_color_active:$harmony_button_font_color; theme_pulldown_border_color:$harmony_border_color; theme_pulldown_contents_background_color:$harmony_box_background_color; theme_pulldown_contents_list_background_color_hover:$theme_button_background_color; theme_pulldown_contents_list_background_color_active:$theme_button_background_color; theme_pulldown_contents_list_font_color_active:$theme_button_font_color; /* GRID VIEW LAYOUT These values set the width and height of grid layout. */ theme_grid_width:220px; theme_grid_height:290px; theme_box_space:10px; /*WIDGET BORDER RADIUS*/ theme_widget_radius:$theme_widget_radius; } /* Global member photos and icons */ img.main{ max-width:500px; max-height:500px; } img.thumb_normal{ max-width:140px; max-height:160px; } img.thumb_profile{ max-width:200px; max-height:200px; object-fit:cover; object-position:top center; } img.thumb_icon, .bg_thumb_icon{ width:48px; height:48px; border-radius:50px; } img.main, img.thumb_normal, img.thumb_profile, img.thumb_icon{ border:1px solid $theme_photo_border_color; }/* GLOBAL MIXINS These groups of styles called "mixins" are included in other classes throughout the stylesheet. */ /* Gives an element a background and/or border */ =foreground { background-color:$theme_foreground_background_color; border:0px solid $theme_foreground_border_color; border-radius:none; } /* Gives an element a drop shadow */ =shadow($offset_x = 0, $offset_y = 0, $blur_radius = 0, $spread_radius = 0, $shadow_color = "#aaa") { -moz-box-shadow:$offset_x $offset_y $blur_radius $spread_radius $shadow_color; -webkit-box-shadow:$offset_x $offset_y $blur_radius $spread_radius $shadow_color; box-shadow:$offset_x $offset_y $blur_radius $spread_radius $shadow_color; } =boxborder{ border-width:1px; /* box-shadow:0px 1px 3px rgba(17, 24, 39, .09); */ } /* Gives an element rounded corners. */ =rounded($radius = 3px, $hidecorner1 = false, $hidecorner2 = false, $hidecorner3 = false, $hidecorner4 = false) { -moz-border-radius:$radius; -webkit-border-radius:$radius; border-radius:$radius; @if($hidecorner1 == true) { -moz-border-radius-topleft:0px; -webkit-border-top-left-radius:0px; border-top-left-radius:0px; } @if($hidecorner2 == true) { -moz-border-radius-topright:0px; -webkit-border-top-right-radius:0px; border-top-right-radius:0px; } @if($hidecorner3 == true) { -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius:0px; } @if($hidecorner4 == true) { -moz-border-radius-bottomleft:0px; -webkit-border-bottom-left-radius:0px; border-bottom-left-radius:0px; } } /* Prevents users from selecting contents */ =noselect { -moz-user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -ms-user-select:none; user-select:none; }
Save Changes
Available Themes
Harmony
v6.5.1
by SocialEngine Core
(this is your current theme)