Forum Replies Created
-
Author
-
guy_fraserParticipant
There were a few alternate methods in that topic I linked to – did you try the ones near the bottom of the topic?
guy_fraserParticipantIt could be caching. The hosting company I use has really good caching config so I have to clear my browser cache after making changes to theme settings or CSS and then reload front-end page to see the results.
guy_fraserParticipantI’ve not tested this and the CSS might need making more specific or add !important between color value and ; …
.main-color #buddypress button, .main-color #buddypress a.button {
border-color: #999;
}guy_fraserParticipantguy_fraserParticipantOption in page editor to set boxed mode: Boxed, Full, Default
Reason: I want boxed mode over most of my site, but there are a few key landing pages where I want full width mode (ie. not boxed). Currently I’m implementing that with page-level CSS but it’s painful having to copy and paste the CSS in to multiple pages = maintenance of multiple duplicates of CSS.
It would be much nicer if I had that page-level override so I could just define css base on .page-boxed selector.
Options in theme config to auto-minify the menu bar (like when you scroll the page and it shrinks):
Force minified menu bar in the following scenarios:
[x] Boxed pages
[x] Full width pages
[x] When menu bar is transparentAgain, I realise I can do this with CSS, but when things like full screen revsliders are involved it causes all sorts of problems, hence the desire to be able to do this via theme config.
Option to completely disable title/breadcrumb bar
I can turn off breadcrumbs, but the title bar still remains. Yes, I can hide it with CSS but it’s still getting output in HTML.
Option to set left/right padding
It defaults to 80px margin, but for redux customisations it would be better as 40px. This is a ‘nice to have’ as it’s pretty easy to do with CSS and I imagine not many people would want it?
guy_fraserParticipantHrm, that’s cumbersome. Would be much nicer if I could create a normal page on the site, and then have 404 page redirected to it.
For example, I create a page called “404” with a slug of “404” then in theme settings I choose that page from drop down list and from that point on any 404 will redirect me to my 404 page in WP.
On my custom page I can use normal editing tools, eg. visual composer, to create a fully customised design. I guess only downside is that some required HTML headers (are there any?) would be missing?
guy_fraserParticipantAnd, if ghost buttons are going to be used, make their design more prominent: http://torquemag.io/taking-a-look-at-ghost-buttons/
guy_fraserParticipantIf you’ve got the WordPress bar enabled for end-users, then this might be of use: http://buddydev.com/plugins/buddypress-clear-notifications/ (I’ve not tried it myself, just spotted it a couple of days ago while looking for something else).
guy_fraserParticipantYup, mentioned here: https://archived.seventhqueen.com/forums/topic/ui-feedback
May 9, 2014 at 04:10 in reply to: How did you implement "Take The Tour" button on demo homepage? #17285guy_fraserParticipantHrm, looks like I’ll have to add some custom jQuery to get the exact effect I’m after.
guy_fraserParticipantOn the menu editor screen, make sure you’ve gone in to “Screen Options” and enabled the BuddyPress option (it’s disabled by default) which adds loads of new menu items. There are options in there for profile, etc., and you can customise the menu text they use. Also, check BP Direct Menus if you need more advanced menus.
guy_fraserParticipantSuggestion: Make k-elements publicly available so that when updates are released we get automatic notification in the dashboard and can do the normal update process.
guy_fraserParticipantWhat is the latest version of k-elements? I am also having this issue and might not have updated it properly last time.
guy_fraserParticipantHaving a community landing page that is customised helps. I was initially just using the sitewide activity page as the community landing page, but that isn’t very appealing.
I’ve now started using the visual editor to construct a custom page layout that has things like member carousels, recent forum topics, popular groups, etc.
I’m still trying to decide whether to go with rtMedia or some alternate media upload/sharing plugin, but once I decide I’ll be adding in recent photo galleries and things like that.
I’m also looking to completely restyle the activity feed as the default design is ‘too clean’. I want to try and add in ‘speech bubble’ backgrounds (or something like that) to make it look a bit more fun.
One thing I would love to do, but have no idea how to achieve, is add in the counters like on the Kleo demo page. In the visual editor there’s an element that does the counter part – I just don’t know how to have the number it needs auto-generated. Maybe there are some shortcodes I’m missing?
guy_fraserParticipantIt’s definitely 100% your theme defaults – specifically the footer ‘Alternate background color’ setting.
Steps to replicate:
1. Go to: Theme Options > Styling options > Footer > ‘Alternate background color’
2. Click the colour selector, then click the ‘Default’ button
3. The colour for that option will now be #272727. Save.
4. Go to front end, clear browser cache, refresh page and open contact popup.
If you then go back in to change the colour to #ffffff, for example, clear browser cache and refresh frontend, you’ll see the change in input/button backgrounds.
IIRC, the default value was changed for the footer and also socket area as a result of this ticket: https://archived.seventhqueen.com/forums/topic/minor-css-glitch-blockquotes-in-socket-bar
guy_fraserParticipantI’ve just disabled all plugins and it’s still happening. Note: This only happens when editing the avatar on an already-existing group (via Admin tab on the public group page > Avatar)
guy_fraserParticipantNope, this is in the HTML… note the inline styles:
<div class=”jcrop-holder” style=”width: 50px; height: 33px; position: relative; background-color: black;”><div style=”position: absolute; z-index: 600; width: 16px; height: 16px; top: 17px; left: 24px;”><div style=”width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;”><div class=”jcrop-hline” style=”position: absolute; opacity: 0.4;”></div><div class=”jcrop-hline bottom” style=”position: absolute; opacity: 0.4;”></div><div class=”jcrop-vline right” style=”position: absolute; opacity: 0.4;”></div><div class=”jcrop-vline” style=”position: absolute; opacity: 0.4;”></div><div class=”jcrop-tracker” style=”position: absolute; z-index: 360; cursor: move;”></div></div><div style=”width: 100%; height: 100%; z-index: 320; display: none;”><div class=”ord-n jcrop-dragbar” style=”cursor: n-resize; position: absolute; z-index: 370;”></div><div class=”ord-s jcrop-dragbar” style=”cursor: s-resize; position: absolute; z-index: 371;”></div><div class=”ord-e jcrop-dragbar” style=”cursor: e-resize; position: absolute; z-index: 372;”></div><div class=”ord-w jcrop-dragbar” style=”cursor: w-resize; position: absolute; z-index: 373;”></div><div class=”ord-n jcrop-handle” style=”cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;”></div><div class=”ord-s jcrop-handle” style=”cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;”></div><div class=”ord-e jcrop-handle” style=”cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;”></div><div class=”ord-w jcrop-handle” style=”cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;”></div><div class=”ord-nw jcrop-handle” style=”cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;”></div><div class=”ord-ne jcrop-handle” style=”cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;”></div><div class=”ord-se jcrop-handle” style=”cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;”></div><div class=”ord-sw jcrop-handle” style=”cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;”></div></div></div><div class=”jcrop-tracker” style=”width: 54px; height: 37px; position: absolute; top: -2px; left: -2px; cursor: crosshair; z-index: 450;”></div><input type=”radio” class=”jcrop-keymgr” style=”position: fixed; left: -120px; width: 12px; display: none;”></div>
guy_fraserParticipantThat’s good to know 🙂 It would be useful if it was somehow compatible with covers/banners used on other social networks such as twitter/facebook/g+/youtube as that would allow people to use their existing artwork.
If possible, please also try and reduce the horizontal space used by the header content – I know there’s the option to ‘show less’ but IMHO that option is indicative of the huge amount of space the header region is taking up, it’s pushing most content below the fold. It’s particularly painful on mobile phones as you have to scroll a whole screen to get to the real content.
guy_fraserParticipantThe dark backgrounds are coming from dynamic.css, specifically things like:
.footer-color .btn-default
and
.footer-color .form-control
I haven’t set any of my own css to affect those selectors.
I remember that in the recent version of KLEO the alt colour for the footer region was added (it was missed in previous release) so maybe that’s it? If not, what setting in theme settings is responsible for setting the colours for those two selectors in the dynamic.css?
guy_fraserParticipantAdd speech recognition to search box 🙂
<input type=”search” …… x-webkit-speech=”x-webkit-speech” speech=”speech” onwebkitspeechchange=”this.form.submit();”>
guy_fraserParticipantClick your avatar image, then “Edit” in the links on your profile page, then scroll down to account section 😉
guy_fraserParticipantI’m happy to lend hand with documenting stuff – if only there was a ‘social articles’ feature in my profile, I could start on it right away 😉
guy_fraserParticipant@leedman The theme’s been working fine on my site, with 40+ plugins installed, but I’m using latest versions of everything. The one (minor) issue I am having is performance of the home page on first visit to the site – a lot of files are being downloaded. After that the caching module of the hosting company (wpengine.com) kicks in and everything is super-fast.
guy_fraserParticipantAwesome!
BTW, I very much like the UI design (not colours) of the SweetDate menus which I assume use similar HTML markup… 😉
Attachments:
You must be logged in to view attached files.guy_fraserParticipantThe navigation in the activity feeds is starting to get somewhat cluttered, especially once a few extra plugins are added. (see screenshot)
I used CSS to hide the “Show:” label on the dropdown, but it’s still wrapping on to the next line when using boxed layout with 2 columns. I imagine over time I’ll end up with even more plugins adding links/tabs to the UI at the top of activity feeds, so….
Would it be possible to have 2 dropdowns?
* Existing dropdown, but labelled “Filter”
* New dropdown, replacing the row of text links, labelled “Scope”IMHO that would make everything look a lot cleaner, and also make it more obvious about the purpose of those two key bits of UI – one sets the scope, the other filters within that scope.
Attachments:
You must be logged in to view attached files.guy_fraserParticipantI notice that the action links/buttons on member blocks (eg. in members directory) are contained in a div – see attached screenshot.
Would it be possible to hide that dive and make it appear as a pop-up when hover-intent over the member? This would make member list much cleaner to look at, and still allow easy access to the action links by hovering over the member box.
Also, do we really need to see their most recent status update / activity in the member directory (or elsewhere for that matter)?
Attachments:
You must be logged in to view attached files.guy_fraserParticipantMy site’s not online yet, but just thought I’d show off the home page, and customised icons on the profile page.
Huge thanks to SeventhQueen support team for helping me swap an icon in the fontello menu, and of course for making such an awesome theme!
Attachments:
You must be logged in to view attached files.guy_fraserParticipantFinally sorted it – in the editor remove the inner container and then make sure padding and margins are all set to 0.
guy_fraserParticipantThe existing text colours are probably defined with higher ‘specificity’ than other elements, meaning that you’ll need to make your own CSS more specific.
For example:
.header-color .top-menu li > a {
color: #db6218;
}The mouse hover state will probably be (I’ve not checked):
.header-color .top-menu li > a:hover {
color: #db6218;
}To change the background colour of the whole top bar you’ll need to use ‘background-color’ instead of ‘color’, for example:
.social-header {
background-color: #f00;
}guy_fraserParticipantFound a bug with this CSS…
If I’m on url A and click a link that goes to url B#whatever, I go to the new url with page scrolled to the html element with id attribute corresponding to #whatever, but the content above that seems to be hidden. It’s as if some JS has kicked in and decided the top of the page is where the #whatever id element is, and mostly everything above that is now hidden from view even when scrolling to top of page. Possibly some conflict with the menu bar auto-minification on scroll?
See attached screenshot. Note the left sidebar content, and the fact that the top part of the profile is hidden.
EDIT: If I was already viewing url B and then clicked a link on that page going to url B#whatever, the page scrolls normally. It’s only when navigating from some other page to a url with a # location in it that this issue arises.
Attachments:
You must be logged in to view attached files.guy_fraserParticipantKleo uses round avatars, adding the following CSS to the theme makes the preview when uploading/cropping an avatar round so you can get a better idea of how the avatar will look on the site:
/* Make avatar upload crop pane round */
#avatar-crop-pane img { border-radius: 50%; }Attachments:
You must be logged in to view attached files.guy_fraserParticipant^ FYI, so far I’ve tested it on latest Google Chrome on Mac OS X. Not tried other browsers yet.
guy_fraserParticipantAwesome, will give it a go and report back.
Speaking of the CSS in theme options, what’s the difference between that and editing the .css in the child theme files editor? Should I always put my css in one or the other? I wasn’t sure why there were two places for adding css…
-
AuthorPosts