Skip to main content
Sign in MENU

Getting Started with Ubertor CSS Support

  • Updated

Overview

The Ubertor CMS is a dynamic content management system; much of the markup is generated based on a series of preferences and settings by the client, and the content of the website. When considering the markup of an Ubertor website, please consider that Ubertor does not provide custom websites, but customizable ones. The structure of Ubertor websites is common to all sites; therefore, it is exceedingly unlikely a request to change the markup without cause will succeed. This is particularly the case because legacy templates and custom designs rely on certain markup within the Ubertor software.

The Ubertor system relies on a multitude of selectors to distinguish pages from one another; for example, both the Properties page and the Blog page have a content_body div. However, each has unique selectors as well, so a designer can create a rule which applies generally to all pages, or specifically to one page, all within a common stylesheet.

When designing for Ubertor, please also avoid implied functionality in your designs and markup. It may seem trivial to style a button which says, "Show Me Similar Listings" or "View Next Agent", but Ubertor does not presently offer that functionality. Adding this to a mock-up or design is simple, but will later cause aggravation for yourself and your client if Ubertor does not intend to implement the feature. If you’re unsure if something is possible, please feel free to contact Ubertor’s extremely capable client support staff. They may answer your question on the spot, or refer your question to a developer for consideration.

The Ubertor Styling System

Ubertor has developed a layered approach to CSS to best serve clients’ styling needs; each site is comprised of a "template" and a "variation". The template controls dimensions, positioning, and other elements of the layout, and the variation controls the colors and images, including backgrounds, borders and links. There is no way to edit these styles for any individual client; because they are common stylesheets to the Ubertor system, much like above, if we were to change them for one site, they would change for all sites.

Instead, we encourage designers to adjust stylesheets by using the control they have over the final layer of CSS, which is local to the site. However, if you find that you’re overriding styles too frequently and would rather develop your styling from scratch, we can assign the site a "blank" template and variation without any styling whatsoever. It is then incumbent upon the designer to restyle the site to match their design, and Ubertor cannot assist in troubleshooting the styling except to ensure there have been no changes to the markup. Additionally, this will disable those features which rely on the template and variation, including the banner, masthead and flash banner tools, as well as the client’s ability to switch color variations.

Remote CSS

The Ubertor Styling System is able to import styling via two methods, the first calledcss_source and the second called remote_css. Both work somewhat differently, but both are advantageous in that they do not appear live on your Ubertor website. Instead, they store the values in a cookie unique to your browser; other visitors to the site will not see any of your changes until your website is actually updated.

The first, css_source, overrides where the software looks for ALL of its remote stylesheets. This is important if you are looking at either switching template/variation for a redesign or are looking at moving to a blank template/variation mentioned above. The value must be a fully qualified URL, including protocol (e.g. http://localhost). It would then be appended as a query to your Ubertor website as a GET parameter (e.g. http://me.myubertor.com/?css_source=http://localhost). This will then be stored in a cookie, so you can venture throughout the site without needing to continually update the value. To remove it, set the value to 0 (zero).

The second, remote_css, is also a fully qualified URL (e.g. http://me.myubertor.com?remote_css=http://localhost/client /test.css); however, unlike the previous, it leaves all stylesheets on your Ubertor website intact, and instead in addition loads remote_css last. This is the easiest way to quickly check numerous changes of a file against the site before pasting code into the CSS section of your Ubertor Control Panel (CP). In the same fashion as css_source, this value also follows you throughout the site via a cookie; again, set to 0 (zero) to remove the value from your cookies.

Files

The Ubertor CMS presently stores all files, including CSS and images, on our file storage service. Files are stored in the client’s namespaced directory, which is then further segmented into various namespaces such as listing", "content" and "site". This is intended to keep a site’s files organized while also demonstrating the purpose of any perticular file within the Ubertor Content Library. Please note that due to concerns regarding filename collisions under this scheme, all filenames become simplified and rewritten. This is not a bug or mistake, nor does it significantly detract from the visitor experience. It will mean that when replacing a file, you cannot simply upload a file with the same name to replace a previous version. However, fear not; the file will still be labeled by its original filename and description in the Content Library. Follow the associated link to see its full path onstorage.ubertor.com.

This also means you may use relative URLs to access files on storage.ubertor.com, as they exist on the same server as your style sheet(s). To reference a file relatively, go up two directories (ie. "../..") and then use the purpose, variant and filename for that particular file. For example, to add an image to an element, you might use a style rule such as:#broker_logo { background-image: url("../../content/image/43 .jpg"); }

Custom Markup

There are several places within the software where the insertion of custom markup is possible; a default header and footer across all pages, and a custom header and footer unique to each content page. The basic structure of an Ubertor page is the same regardless of the page’s content; the content, listing and blog pages all share mostly common markup. As a CSS designer, you will be able to distinguish these pages by the selectors placed within them.

The aforementioned sections are the only place outside of the content editor where custom markup can be included within the Ubertor site. This includes anything desired in the head of the document, such as script tags. Ubertor websites follow the HTML 4.01 specification, which means that script tags can be placed anywhere within markup per the specification and are supported by every browser. As for title and meta tags, these are solely accessible via the SEO package (for the latter, only the content of particular tags is accessible).

Because Ubertor sites run from a common code-base and so many portions of the site are generated dynamically, it is not nearly as simple as it would seem to provide designers direct access to the markup. Assuredly, working with only the styling of the site can present unique challenges, particularly when clients are pressing for more advanced features and you have specified deadlines for preparing the site. This guide should help you evaluate a design and determine whether it can be produced on the Ubertor software platform. Keep in mind, however, that it does have limitations and may present design constraints.

Header

 

Site Heading

Site Subheading

The header on an Ubertor website is broken into several distinct parts; the first of which is the page header. This has two surrounding elements, page_header_outer which is frequently used to display the banner of the website, and page_header_inner which is used to display the masthead, site heading and contact information. The broker_logo is used by the logo system to place a transparent background image upon the element. You may use this element for any purpose you choose -- it will never contain content. Please be sure the logo tool is turned off if you will be assigning your own background image.

The contact_info is an unordered list with individually classed list-items ( phone, fax, mobile, email and toll-free). These can be styled, positioned or hidden appropriately depending on the requirements of your design, although they cannot be reordered. They can, however, be repositioned or image-replaced with CSS as appropriate.

Pages

Each page of the Ubertor system, whether visible or not, exists within the content manager. These pages can be edited with the content editor, and any content placed on a page will appear within the content_body div on a given page. The content editor supports markup for advanced users, and can easily drop in images and links to documents of various formats. content_body is surrounded by content_outer and content_inner, respectively. This will assist with applying borders and background styles to the content areas of client-editable pages; note that these selectors are system-wide, and will affect every page on an Ubertor website (unless prepended by a specific selector).

Furthermore, each page will have a class derived from its page label (e.g. "Blog" and blog) and will also inherit the class of any parent page. This means that if ’Contact’ is beneath ’About Us’, it will have both classes attached to it, permitting designers to have sections with unique styling which otherwise would not have a common selector.

Menu

The menu is one of the most utilized components of the Ubertor website. An active page, or the parent of an active page, will receive a sel class on its associated menu list-item. All other list items receive a class of unsel to demarcate that they are presently not in use. In addition, each top-level page list-item also has an unique ID (e.g. up_menu3) based on its sequence within the menu. This provides for special styling on particular elements, and even for them to be moved out of the flow of the menu.

Widget Inset Boxes

 

Widget insets are used to display a variety of information, including featured listings, agent data, search boxes, recent blog postings and blog archives and categories. The whole inset is contained within the id_inset_wrapper and id_inset_outer divs. Each individual widget is contained within an inset_group (with accompanying unique ID). Widgets also affect the rendering of the page; a page with widgets will receive a has_insets class on the body element of the page. This means content_body and other elements can have conditional styling (particularly dimensions and positioning) which apply only when the page has inset widget boxes.

The widget may then contain elements with the inset class, which will also have a class related to its type (e.g. category, blog, search, agents, etc.) and another ID unique to that div. Keep in mind, as with the case of blog or featured listing widgets, that because they can display multiple items, the inset_group may contain several divs. Each inset_group or insetmay also possess an h3 which denotes the heading of this inset. It can be hidden, image-replaced or styled appropriately.

Finally, should you require custom markup within a new inset box, this is possible (via an Ubertor client service representative) for a nominal fee. However, as clients do not presently have access to this region of the content editor, any changes or updates (with the exception of removal, at no cost) will require an additional fee.

Footer

 

Privacy Policy Sitemap http://www.ubertor.com" id="powered_by" title="Real Estate website powered by Ubertor (tm). The Business of Real Estate Easy!">Real Estate websites for Agents

 

Properties Pages

The properties pages are the core of the Ubertor framework. There are two varieties, the property listings pages which display numerous property overviews, and the property details pages which display the information regarding a single listing. Both are detailed below, with an additional note regarding pagination on properties pages.

Property Listings

#330 - 1085 Homer Street, Vancouver, BC

http://storage.ubertor.com /cl1629/listing/ListingImage_5 _image/27.jpg" alt="Yaletown House for sale: 10000 sqft (Listed 2005-06-22)"/>

This is the home of the world-famous web hosting company, Ubertor Inc. Ubertor is known for producing top-quality websites and for their excellent post-sales support! Read�More

The property listings pages are shown and determined by a number of page-specific settings within the Ubertor CP. If your client wishes to change the sort order or make other changes, it is best to have them contact an Ubertor client support representative. This page shows a brief synopsis of each listing, including a thumbnail image, listing information and a brief (truncated) description field, followed by a "read more" link. Additionally, if the listing is imported via the reciprocity system, it will likely display the logo of the appropriate reciprocity board.

Pagination

  • Page:
  • <><
  • 1 of 1
  • >
  • Total of 1 Item

The pagination for Ubertor’s listing engine is fixed at 10 listings per page. Depending on the number of listings to be displayed, the site will split the listings into an appropriate number of pages. Note that whether there are sufficient listings, all links in the pagination will still display; however, they will link to the current page if there is no other appropriate page (first, previous, next, last) to link against. This ensures that designs can count on particular elements existing, even if they would not presumably appear.

Property Details

The page is principally comprised of numerous unordered lists (navigation, links, listing info, agent info, etc) and the Ubertor Slideshow viewer.

This page also displays other views for a listing, including the map, internal virtual tours, floorplans and extras, and comparables. These are controlled by the detail_menu of the property details page, and are classed (with sel and unsel) in the same fashion as the main menu.

Overview

#330 - 1085 HOMER STREET, VANCOUVER, BC

MLS#:
�
  • Property Value$1,543,210
  • Property Address#330 - 1085 Homer Street, Vancouver, BC, Canada, V6B 1J4
  • TypeHouse
  • StyleOffice
  • BasementYes
  • Year Built2005
  • Square Feet10,000
  • Lot Frontage200
  • Lot Depth175
  • Lot Size Area12500
  • Bedrooms5
  • Bathrooms2 full & 1 half

Yaletown Address

#330 - 1085 Homer Street, Vancouver, BC, Canada, V6B 1J4

Description

This is the home of the world-famous web hosting company, Ubertor Inc. Ubertor is known for producing top-quality websites and for their excellent post-sales support!

Features

BodyWorks, a great, friendly gym, is located on the second floor.

Other Specialty Pages

There are other pages within the Ubertor CMS which have particular functionality; these include the Forms, Blog, Links and Roster pages. Each of these pages has additional selectors to help designers in customizing these

Checklist

Finally, we’ve compiled a checklist of a number of common site areas which require styling and might be of interest to you as a designer, but which could easily be overlooked. We suggest these be added to the site prior to styling; they are less likely to be overlooked if they are visible from the outset.

  • Site
    • Select a company logo
    • Add a banner, if appropriate
    • Add a masthead, if appropriate
  • Home Page
    • Add paragraphs
    • Add images
    • Add headers (h1, h2, etc)
    • Add unordered list, with sublist
    • Add ordered list, with sublist
    • Widget inset boxes (featured listing, search, etc)
  • Lead Generator Forms (For Buyers, For Sellers, Contact)
    • Bullets only when appropriate
  • Menu
    • Pages/subpages display hover and selected effects
    • Add footer menu items
  • Properties List
  • Property Details
    • Title and address displaying correctly
    • Cycle through appropriate tabs (e.g. mortgage calculator, google maps)
    • Page header and address on details
    • Google Map
    • Featuresheets
    • Virtual Tours
  • Links
    • Headings and links appear correctly

If you have further questions about the Ubertor system or its CSS compatibility which aren’t covered in this overview, please feel free to contact our client support representatives during regular business hours.