-
Search Results
-
(re post as per request by Brian)
One thing that I increasingly observe in a lot of websites in the last 6 months is the way they are handled on a “normal” display. Somehow my 1920×1200 screen is containing less and less information, and my scroll button is working overtime. On other sites that have made similar transitions I see a lot of “power users” who spend a great part of their days behind 1 or more regular displays complaining about the low information density of the ‘modern’ site layouts.
Would it be feasible to accommodate those users by implementing the possible use of a custom stylesheet or some other mechanism to make it possible for a user to make his/her own decisions about the amount of info you get presented…. ??
I realize we do need to be aware of touch and other devices, but we should also still not forget about regular Joe behind his desktop monitor. Its only a few years ago that we were able/required to put a whole website into the whitespace that you see in 2 posts on this forum
And now I realize I miss the “preview post” before submitting… (you can go to the full screen editing mode, but that is not the same.. and its very easy to incidentally use the back button on your keyboard and loose your whole post)
Greetz, Henk
Simplicity is not Simple Webtaurus
[Resolved]Topic: Removing the post-info from Shopp products on Fabric child theme
I'm working on a custom child theme that started out as Fabric. There a Shopp-powered catalog, and on the product pages, it's displaying the post-info.
Normally this is turned off by the shopp.css, but the post-info is moved outside of the div that controls this. If I add
.post-info {display: hidden;}
to shopp.css it hides post-info on regular blog posts, too.Here's an example URL: http://weidmann.roomfiveproductions.com/shop/indivisible/
Any suggestions?
[Resolved]Topic: BuddyPress + Genesis Customization
I'm looking for help in how to go about in creating an anonymous social network via BuddyPress that allows for my members to interact with each other with no barriers to communication, form groups, share their experiences with each other without compromising their identities.
This is a social network for individuals in recovery from addictions who crave community but value their privacy.
There are a number of customizations that I am looking for to be done with BuddyPress and my current Gensis WordPress child-theme Outreach 2.0 to be compatible together and to meet the goals that I have for the site. I know Ron creator of GenesisConnect was going to update some things via CSS but he's not given any ETA for the update, so will need this done sooner.
For example: Right now in BuddyPress, you can look up a member in a directory and it will show their First Name and Last Name and their member profile URL will be based on their name. Ideally would like for this to be based off of their anonymous nickname.
The right person for this job is someone who values bringing people together and the concept of a tribe, is a self-starter, and can be realistic about deadlines.
With regards to requirements you will need to have a level of expertise with BuddyPress/Wordpress that you could create a custom plugin if you wanted to.
This will also need to be integrated with my membership plugin Imember360 that will give certain permissions to members on a specific membership level. So you I imagine you will need to look at the plugins short code and our CRM's API for some aspects of this project.
If this project interests you and you think you are the right person for this project, please message me.
Add these lines of code in your functions.php:
// Custom WordPress Login Logo
function login_css() {
wp_enqueue_style( 'login_css', get_stylesheet_directory_uri(). '/css/login.css' );
}
add_action('login_head', 'login_css');
As you can see, I've chosen to create a new stylesheet file for the login form. Although I prefer to do it this way, you can use the stylesheet of your current theme and just skip the step above.
Next, add the following to the stylesheet:
#login h1 a {
background-image: url("http://YOUR-WEBSITE.com/wp-content/themes/YOUR_THEME/images/custom_logo.png") !important;
}
Below are some snippets from a pretty neat article on Smashing Magazine about WordPress coding. I'd suggest checking out the article and learning a little more about the importance of tidy coding and how it can help you with both design and development of web sites.
WHY CODE FORMATTING MATTERS
Even if you’re working on a pet project, the format of your code says a lot. And if you’re in a multi-developer environment, it speaks volumes. Code that is well formatted and well thought out shows quality (even if it isn’t good), while chaos begets sloppy programming (even if it is genius).Here are but a few reasons to pay attention to the format of your code:
Well-formed code is easier to maintain. You might know what’s going on today, but what about a year from now? Taking the time to give structure to your work will save you eons of time later on (… well, maybe not eons).
Other developers do not share your brain, so they won’t understand your chaotic code, or they would need a long time to untangle it. Ensuring as little friction in communication as possible is in the project’s best interest, and this can be facilitated by standards-compliant formatting.
Slightly less importantly, someone who is learning to program should be able to visit a website and learn something by looking at the source code. Standards usually have an inherent logic, so an onlooker would be able to figure out what’s going on. Adhering to standards could help a lot of budding developers learn programming the right way from day one.
In many cases, good formatting helps maintainability. Many standards require you to space out if statements and other blocks of code. Not crowding the code together will make an “Error on line 267” message much easier to fix.PHP IN WORDPRESS
Line breaksWordPress’ documentation says nothing in particular about line breaks, but adding a line break after most statements is common practice. Variable definitions, items and so on should be on separate lines.
Indentation
Indent code to show a logical structure. The goal here is readability, so any indentation that makes the code more readable is a good practice. Use tabs at the beginning of lines, and use spaces for mid-line indentation.
Space usage
Remove all trailing spaces from line endings. Empty lines with tabbed or non-breaking spaces is also common — remove these as well. But use spaces to make your code readable, most commonly within parentheses. Insert a break after an opening brace and before a closing brace, except when typecasting.
FORMATTING CSS
Consistent styling is just as important in CSS as in PHP and HTML. When a user wants to change a small detail in your theme, they will inevitably end up in a CSS file. Thus, the CSS could be the most visible code that you write. The “CSS Standards” document is a “rough draft.” Most of what’s there is probably there to stay, but as stated on the page itself, it is all subject to change.Follow the draft closely. If something changes, you’ll still be up to speed on most of the guidelines; and if your existing CSS code doesn’t adhere to it 100%, the reason will be understandable.
--- View the full article here.
Topic: Using jQuery Isotope
1. Download the isotope package then upload the jquery.isotope.min.js to a folder titled "lib" in the child theme's directory.
2. Create a file and name it isotope-parameters.js and place the following into it.
$(document).ready(function () {
//Set your isotope area
var $container = $('#container'),
filters = {};
//Set our items to be filtered, .post will work if you're using the post_class(); function
$container.isotope({
itemSelector : '.post'
});
// filter items when filter link is clicked
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
})
});3. Upload that file to the child theme's lib folder
4. Add this into the child theme's functions.php. Note I had to deregister WP's jquery and reload from google for some reason that I never worked out.
// Load scripts
add_action( ' wp_enqueue_scripts', 'child_load_scripts' );
function child_load_scripts() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'isotope', CHILD_URL . '/lib/jquery.isotope.min.js', true );
wp_enqueue_script( 'parameters', CHILD_URL . '/lib/isotope-parameters.js', true );
}5. Create a page template and add this for the filter selector editing the "XXX" with the ID of the category whose children you want as filters
<ul id="filters" data-filter-group="color">
<li class="filter">Filter:</li>
<li><a href="#filter-topic-any" data-filter="" class="selected">All</a></li>
<?php
//Grab the child categories
$categories = get_categories( 'child_of=XXX' );
foreach ( $categories as $category ) {
//and format them for use as isotope filters
echo '<li><a href="#filter-topic-' . $category->slug . '" class="" data-filter=".category-' . $category->slug . '" ' . '>' . $category->name . '</a></li>';
}
?>
</ul>
6. Add your loop below that. The only important point here is to put the posts into a "<?php post_class(); ?>" div. For example something like
<?php $recent = new WP_Query( 'category_name=REPLACE_WITH_PARENT_CAT_NAME&posts_per_page=999&orderby=rand' );
while ( $recent->have_posts() ) : $recent->the_post(); ?>
<div <?php post_class(); ?>>
POST CONTENT STUFF
</div><!-- end .post-class -->
<?php endwhile;
wp_reset_query(); ?>7. Add the isotope style rules to your style sheet along with any other rules you want
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}Hope that helps you get Isotope running in your project!
John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography
Forum: Design Tips and Tricks
*This forum has been closed and remains as an archive.* Share code snippets and get help with CSS questions.
Welcome!
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.