Hello everyone, today I'm announcing the development of a new RevCMS theme - jup1ter. In short, jup1ter is a new roleplay theme for RevCMS. I plan to have a sleek, simple, user friendly design. I feel that you'll either love it, or hate it. I decided to do an RP theme because the ones that have already been released here... are sloppy and frankly, bad. (No offense to designers), enough rambling, let's get on with it.
- Corporation management page
- Sleek, simple CSS3 design
- Its own webbuild - similar to Jonty's UberCMS2.
- Fully functional business page
- Sleek news system with CSS3 tags
- Fully functional gang page
- Its own forum
- Weapon license page - similar to XoaCMS by Jamie
- Ammunition page (buy weapons, ammo, bullets all on CMS)
- And much much much more... remember, this is pre-beta.
This section will be updated as screenshots become available.
Index -
Index -
You must be registered for see links
Like the section above, this will be updated as snippets become available.
Index - HTML version, before adding PHP. (See screnie)
Main CSS Sheet (Thanks to
Index - HTML version, before adding PHP. (See screnie)
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Faze 2.0 index.">
<title>Faze 2.0 - Index</title>
</style>
</head>
<link rel="stylesheet" href="css/layouts/pure-min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/grids-responsive-min.css">
<!--<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/layouts/blog-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/blog.css">
<!--<![endif]-->
</head>
<body>
<div id="layout" class="pure-g">
<div class="sidebar pure-u-1 pure-u-md-1-4">
<div class="header">
<img src="img/logofaze.png" alt="Logo">
<h2 class="brand-tagline"><i>Where roleplay and innovation meet.</i></h2>
<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
<a class="pure-button" href="http://localhost/index#">Log In</a>
</li>
<li class="nav-item">
<a class="pure-button" href="http://localhost/register.php">Register</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="content pure-u-1 pure-u-md-3-4">
<div>
<!-- A wrapper for all the blog posts -->
<div class="posts">
<!-- A single blog post -->
<section class="post">
<header class="post-header">
<img src="img/backdrop/view.png">
<section class="post">
<header class="post-header">
<h2 class="post-title">Welcome to Faze 2.0!</h2>
<p class="post-meta">
By <a class="post-author" href="#"> Administrator </a> under <a class="post-category post-category-css" href="#">General News</a>
</p>
</header>
<div class="post-description">
<p>
Faze is the capital of roleplay. We provide an amazing experience to have fun with friends, commit crimes, form a crime syndicate and more! If you're new, contact one of our Ambassadors to get help inside the hotel! Faze's new XP system is complete, Leave some feedback/ideas on our forum, <a href="#">here</a>!
</p>
</div>
</section>
</div>
<div class="footer">
<div class="pure-menu pure-menu-horizontal">
<ul>
<p>Copyright {hotelName} 2015.</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Main CSS Sheet (Thanks to
You must be registered for see links
)
Code:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: rgb(61, 146, 201);
}
a:hover,
a:focus {
text-decoration: underline;
}
h3 {
font-weight: 100;
}
/* LAYOUT CSS */
.pure-img-responsive {
max-width: 100%;
height: auto;
}
#layout {
padding: 0;
}
.header {
text-align: center;
top: auto;
margin: 3em auto;
}
.sidebar {
background: rgb(184, 0, 0);
color: #fff;
}
.brand-title,
.brand-tagline {
margin: 0;
}
.brand-title {
text-transform: uppercase;
}
.brand-tagline {
font-weight: 300;
color: #fff;
opacity: 0.5;
}
.nav-list {
margin: 0;
padding: 0;
list-style: none;
}
.nav-item {
display: inline-block;
*display: inline;
zoom: 1;
}
.nav-item a {
background: transparent;
border: 2px solid rgb(255, 255, 255);
color: #fff;
margin-top: 1em;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 85%;
}
.nav-item a:hover,
.nav-item a:focus {
border: 2px color: #;
text-decoration: none;
}
.content-subhead {
text-transform: uppercase;
color: #aaa;
border-bottom: 1px solid #eee;
padding: 0.4em 0;
font-size: 80%;
font-weight: 500;
letter-spacing: 0.1em;
}
.content {
padding: 2em 1em 0;
}
.post {
padding-bottom: 2em;
}
.post-title {
font-size: 2em;
color: #222;
margin-bottom: 0.2em;
}
.post-avatar {
border-radius: 50px;
float: right;
margin-left: 1em;
}
.post-description {
font-family: Georgia, "Cambria", serif;
color: #444;
line-height: 1.8em;
}
.post-meta {
color: #999;
font-size: 90%;
margin: 0;
}
.post-category {
margin: 0 0.1em;
padding: 0.3em 1em;
color: #fff;
background: #999;
font-size: 80%;
}
.post-category-design {
background: #5aba59;
}
.post-category-pure {
background: #4d85d1;
}
.post-category-yui {
background: #8156a7;
}
.post-category-js {
background: #df2d4f;
}
.post-images {
margin: 1em 0;
}
.post-image-meta {
margin-top: -3.5em;
margin-left: 1em;
color: #fff;
text-shadow: 0 1px 1px #333;
}
.footer {
text-align: center;
padding: 1em 0;
}
.footer a {
color: #ccc;
font-size: 80%;
}
.footer .pure-menu a:hover,
.footer .pure-menu a:focus {
background: none;
}
@media (min-width: 48em) {
.content {
padding: 2em 3em 0;
margin-left: 25%;
}
.header {
margin: 80% 2em 0;
text-align: right;
}
.sidebar {
position: fixed;
top: 0;
bottom: 0;
}
}As of right now, I know it seems like there's not much to show, but please, bare with me. Development just started. Please comment ideas, suggestions, constructive criticism, anything below. I'm open to anything.
