-
Posts
-
I’m putting out a call for people to help develop the base theme, for a final and clean appearance.
Anyone who makes significant contributions to Symbiostock can of course have a premium version free of charge. Even if you tackle a page, that is enough. If you are already in possession of the premium theme, we will instead give prominent links from the main site.
THE GOAL
Simply stated: A refinement to the Styles.
Minimal, Clean, Happy
Not too much color, but refreshing. Let color accent it in the most minimal, necessary ways.
I love white, and I know its a universal standard 😀
Imagine if your Symbiostock site could make you feel like your in here:
You know that “Dragonlfly” theme we have? We’re going to put those options straight into the main theme, out of the package. But, the default is going to be this beautiful, minimal version we create together.
Symbiostock’s appearance is still a little clunky. Thankfully, however, this is not due to structure. Its a simple solution: A style sheet.
Do research. Be inspired. Find things you like, that are refreshing and happy, and see how they can be applied to Symbiostock. This will in fact be the first big group effort of the network.
THE STANDARD
See the attached draft of Symbiostock’s main page. Still very much under revision, but you can see (especially the top) where things are going.
Just as it’s aim is to be visually minimal, we should be seeking only the most conservative use of CSS. Less is more.
-
Whenever possible, white.
Text round, modern, and less dark.
Flat and blocky shapes.
Vivid color only in specific places, accentuating, not dominating, drawing attention to key places.
You may contribute only small blocks of css if you wish, and I (and whoever else is involved) will do what we can to make them consistent with other provided visuals.
Symbiostock is getting a drastic visual overhaul across the board. While I’m accustomed to doing most work myself, I believe its wisest to delegate this with the above terms / standards.
Thank you,
Leo
loving this..
I have been away from the forums these past few weeks and trying to catch up with what’s going on..
what I am seeing is exciting..
I put this in the MSG thread, but I’ll add it here too…
I’m OK with the design. I think these are the only edits I put in my editor…
.panel {
box-shadow: none;
border: 0;}
.panel-default .panel-heading {
background-image: none !important;
background-color: #FFF;
}Not sure if that is what you are looking for.
I tried to get a kind of minimal design on my site, especially on my single image pages … so I decided to put the documentation of my code changes (some of them done with help of others like Jo-Ann and Martha) here. I hope there are some useful lines of code 😀
Here is an example of an single image page:
And this is the documentation of code changes:
Flashstockphoto.com – documentation of changed code in Symbiostock, version 3
1. Footer modified
replace entire footer.php, via editor (under appearance) by:
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content after
*
* @package symbiostock
* @since symbiostock 1.0
*/
?>Copyright © 2013 flashstockphoto.com. All Rights Reserved. All photos are copyright protected.This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies.2. Modified Popular images and Featured images
styles.css, add at the end:
.DivImagesPopularText
{
position: relative;
top: 45px;
text-align: center;
color: #A4A4A4;
font-family: Arial;
font-size:17pt;
}
.DivImagesPopularImages
{
position: relative;
top: 20px;
}
.widget .search-result {
float: left;
height: 160px;
margin-left: 13px;
min-width: 160px;
}3. Changing link color to red
bootstrap.css
line 327 :
replace #428bca by #A4A4A4
line 333 :
replace #2a6496 by #FF0000
4. Changing color of image number above product table from black to gray
bootstrap.css, line 5386 and following lines, replace by:
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: #A4A4A4
}5. Changig color of active size in product table from yellow to green
styles.css, line 207
#FFFF64
replace by: #7ECF73
6. Adding „Back to Top“ button on Single Image Pages
content-image.php, line 14, add:
content-image.php, line 221-223, add:
BACK TO TOP</div
7. Add Release information to single image page and change position and size of datecontent-image.php, line 48-95 replace by:
<?php
$symbiostock_post_meta = ‘ss_before_img_page_preview’;
do_action( ‘ss_before_img_page_preview’, $symbiostock_post_meta );
?><a id="stock-image-preview" title="” rel=”enclosure” type=”image/jpeg” href=””> <img itemprop="contentURL image" class="photo img-responsive" alt="” src=””/><?php
$symbiostock_post_meta = ‘ss_after_img_page_preview’;
do_action( ‘ss_after_img_page_preview’, $symbiostock_post_meta );
?><?php
$symbiostock_post_meta = ‘ss_before_img_page_description’;
do_action( ‘ss_before_img_page_description’, $symbiostock_post_meta );
?><?php the_content( __( 'Continue reading ‘, ‘symbiostock’ ) ); ?>
<?php
$symbiostock_post_meta = ‘ss_after_img_page_description’;
do_action( ‘ss_after_img_page_description’, $symbiostock_post_meta );
?>‘
‘ . __( ‘Pages:’, ‘symbiostock’ ), ‘after’ => ‘‘ ) ); ?>
<?php //code "borrowed" from symbiostock_marketer() in marketer_functions.php
// model release
$id = get_the_ID();
$model_released = get_post_meta( $id, ‘symbiostock_model_released’, ‘N/A’ );
if ( empty( $model_released ) || $model_released == false ) {
$model_released[ 0 ] = ‘N/A’;
} //empty( $model_released ) || $model_released == false//property release
$property_released = get_post_meta( $id, ‘symbiostock_property_released’, ‘N/A’ );
if ( empty( $property_released ) || $property_released == false ) {
$property_released[ 0 ] = ‘N/A’;
} //empty( $property_released ) || $property_released == false
?>
Model Released:
Property Released:
Image updated—<?php
$symbiostock_post_meta = ‘ss_before_img_page_author_box’;
do_action( ‘ss_before_img_page_author_box’, $symbiostock_post_meta );
?><?php
$symbiostock_post_meta = ‘ss_after_img_page_author_box’;
do_action( ‘ss_after_img_page_author_box’, $symbiostock_post_meta );
?><?php
$symbiostock_post_meta = ‘ss_bottom_img_page_preview_well’;
do_action( ‘ss_bottom_img_page_preview_well’ );
?>8. Box „See inluded images“ centered
collection-page.php
line 117-119, replace by::
?>
<?php
9. Included image box, new colorbootstrap-theme.css,line 212-220, replace by:
.alert-info {
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9edf7), to(#b9def0));
background-image: -webkit-linear-gradient(top, #d9edf7, 0%, #b9def0, 100%);
background-image: -moz-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
background-image: linear-gradient(to bottom, #F1F1F1 0%, #C5C5C5 100%);
background-repeat: repeat-x;
border-color: #C5C5C5 ;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffd9edf7′, endColorstr=’#ffb9def0′, GradientType=0);
}
10. Changing text color of Exclusive Image Box to redbootstrap.css, line 5028
#468847
replace by: #FF0000
11. Changing background color of Exclusive Image Box
bootstrap-theme.css
line 206
(to bottom, #dff0d8 0%, #c8e5bc 100%)
replace by:
(to bottom, #EEEEEE 0%, #EEEEEE 100%)
line 208
#b2dba1
replace by:
#EEEEEE
12. Changing Exclusive Image Textline 207 in cart.php (inc-classes-cart)
Found only here on http://www.flashstockphoto.com13. Removing icons
font-awesome.css
Featured Images: line 398 icon-star-empty
Keywords: line 506 icon-tags
Latest Images: line 696 icon-eye-open
Image Categories: line 1006 icon-sitemap
Similar Images: line 1257 icon-bullseye
add 1 (or anything als to the name of the icon
14. Changing color of Description from black to graybootstrap.css line 302-308, replace by:
body {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #999999;
background-color: #ffffff;
}15. Changing color of License Box from yellow to gray
bootstrap.css, line1565-1574, replace by:
background-color: #f9f9f9;
border-color: #dddddd;
}.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td {
background-color: #f5f5f5;
border-color: #dddddd;
}The Clean Theme was the nicest. If we’re going for minimal can we please get rid of the scrolling on the network results, it’s very hmm 🙄 distracting.
You must be logged in to reply to this topic.