How to position and style “See More” button?

If you can tell me where you want to place the button and how you want it to appear I can give you the custom styling for it. A URL for your site would help too, particularly for the styling of the button.

>> If you can tell me where you want to place the button and how you want it to appear I can give you the custom styling for it.

Well for now I was just hoping you could direct me on how to approach it. For the styling, can I simply target the element with custom CSS? Is there any way I can give the button a custom class? With regards to the position, would could I also do that with custom CSS? For example, let’s say I wanted to center the button on the screen?

>> A URL for your site would help too, particularly for the styling of the button.

The site is still under development, so it needs a username and password to access it. I’m happy to share those with you. But there seem to be rules against it. To me it seems like it limits how much support you can give.

Well for now I was just hoping you could direct me on how to approach it. For the styling, can I simply target the element with custom CSS? Is there any way I can give the button a custom class? With regards to the position, would could I also do that with custom CSS? For example, let’s say I wanted to center the button on the screen?

Sure – my recommendation would be to do it using custom CSS under Appearance → Customize → Additional CSS. The button comes with its own class .photonic-more-button, which you can target. If you wanted to change the positioning, you will also need to know the parent container, which for Instagram would be .photonic-instagram-stream. Let’s say you wanted to center it. You would say:

.photonic-instagram-stream { text-align: center; }

Similarly, changing the font / background etc. can be targeted directly at the element:

.photonic-more-button { background: #333; }

If you would like consistent definitions for the button upon hover, active, focused and visited states, you might want to replicate the above for the classes .photonic-more-button:hover, .photonic-more-button:active, .photonic-more-button:visited and .photonic-more-button:focus.

To me it seems like it limits how much support you can give.

True – that is the price WP charges for offering a free forum for free support. That being said, even with the limitation in place I have been able to respond to Photonic-specific support queries over 2000 times so far on this forum, so it hasn’t had as much of an impact as you would think it would. Probably less than 20 requests have come in so far that have wanted my personal contact information to send login details.

OK got it, thanks. I increased the width of the button with this selector:

#photonic-instagram-stream-1 > a {
min-width: 20%;
}

Do you see any potential long term issues with that?

Do you see any potential long term issues with that?

If you add another Instagram gallery the id of this one might change depending on which one is getting rendered first. So it might be safer to target this by class rather than id.

OK thanks. I have done so. We can consider this resolved.